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

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

  $ npm run eject

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

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

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

  仿照格式，在下面配置 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$/;

  继续向下搜索 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'
    ),
  },
  ...

  和之前配置一样，仿照 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'
    ),
  },
  ...

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

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

• 安装 craco

  $ npm i @craco/craco
  # 或
  $ yarn add @craco/craco

• 安装 less 与 less-loader

  $ npm i less less-loader -S
  # 或
  $ yarn add less less-loader -S

• 修改 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"
  }

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

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

• 配置 croca.config.js 文件

  const path = require('path')
  const lessPlugin = require("craco-less");
  
  module.exports = {
    // 插件
    plugins: [
      {
        plugin: lessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              modifyVars: { "@primary-color": "#1DA57A" },
              javascriptEnabled: true
            }
          }
        }
      }
    ],
    // webpack 配置
    webpack: {
      // 配置别名
      alias: {
        // 约定：使用 @ 表示 src 文件所在路径
        "@": path.resolve(__dirname, "src")
      }
    },
    babel: {
      plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
    }
  }