React 安装使用 Less（详细流程，包含 webpack、craco 方式）

一、简介

• React 项目开发中可能会使用到 Less、Sass 等样式预处理器，create-react-app 创建的 React 项目，默认就是支持 Sass 的。如果需要使用 Less 则需要额外手动安装配置。

二、方式一：webpack.config.js 配置（不推荐）

• 由于需要暴露隐藏的配置文件，不利于项目升级，不推荐使用。

• 安装 less 与 less-loader

  $ npm i less less-loader -S
  # 或
  $ yarn add less less-loader -S
  1
  2
  3

• 暴露 webpack 配置文件。（提示：该操作不可逆，长远考虑不推荐使用该方案）

  $ npm run eject
  1

• 修改 webpack.config.js 配置文件

  首先要找到以下代码，可以使用 VSCode 查询功能直接找到，搜索内容为 sass:

  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  1
  2
  3
  4
  5

  仿照格式，在下面配置 less:

  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  1
  2
  3
  4
  5
  6
  7

  继续向下搜索 sass，能够找到以下代码:

  ...
  {
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
          mode: 'icss',
        },
      },
      'sass-loader'
    ),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true,
  },
  // Adds support for CSS Modules, but using SASS
  // using the extension .module.scss or .module.sass
  {
    test: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
          mode: 'local',
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      'sass-loader'
    ),
  },
  ...
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41

  和之前配置一样，仿照 sass 配置，添加 less 配置:

  ...
  // config less
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
      },
      'less-loader'
    ),     
    sideEffects: true,
  },
  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      'less-loader'
    ),
  },
  ...
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32

• 到这就完成了 webpack.config.js 配置 less，重启项目则可使用 less 样式了。

三、方式二：craco.config.js 配置（推荐）

• 安装 craco

  $ npm i @craco/craco
  # 或
  $ yarn add @craco/craco
  1
  2
  3

• 安装 less 与 craco-less

  $ npm i less craco-less
  # 或
  $ yarn add less craco-less
  1
  2
  3

• 修改 package.json 文件

  "scripts": {
      // "start": "react-scripts start",
      // "build": "react-scripts build",
      // "test": "react-scripts test",
      "start": "craco start",
      "build": "craco build",
      "test": "craco test",
      "eject": "react-scripts eject"
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 补充：下载装饰器（可选，看情况使用）

  $ npm i @babel/plugin-proposal-decorators -S
  # 或
  $ yarn add @babel/plugin-proposal-decorators -S
  1
  2
  3

• 根目录创建，并配置 craco.config.js 文件

  const path = require('path')
  const lessPlugin = require("craco-less");
  
  module.exports = {
    // 插件
    plugins: [
      {
        plugin: lessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              // antdv 主题之类的配置
              // modifyVars: { "@primary-color": "#1DA57A" },
              javascriptEnabled: true
            }
          }
        }
      }
    ],
    // 如果没安装，可以删除
    babel: {
      plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24