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/6571sideEffects: 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 与 craco-less

  $ npm i less craco-less
  # 或
  $ yarn add less craco-less
  

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

• 根目录创建，并配置 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 }]]}
  }