一：引言

react默认支持用scss，不支持less，直接使用less时会报错，因此当使用less的时候需要进行额外配置

二：方案

1：使用craco

第一步：

npm i craco
npm i craco-less

第二步：修改 pacage.json 中的命令，将react-app-rewired改为craco

{
  "scripts":{
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
} 

第三步：新增  craco.config.js  文件

const CracoLessPlugin = require("craco-less");
const { loaderByName } = require("@craco/craco");
 
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule(lessRule, context) {
          // You have to exclude these file suffixes first,
          // if you want to modify the less module's suffix
          lessRule.exclude = /\.m\.less$/;
          return lessRule;
        },
        modifyLessModuleRule(lessModuleRule, context) {
          // Configure the file suffix
          lessModuleRule.test = /\.m\.less$/;
 
          // Configure the generated local ident name.
          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
          cssLoader.options.modules = {
            localIdentName: "[local]_[hash:base64:5]",
          };
 
          return lessModuleRule;
        },
      },
    },
  ],
};

第四步：修改 react-app-env.d.ts 文件

declare module '*.module.less' {
  const classes: {
    readonly [key: string]: string
  }
  export default classes
  declare module '*.less'
}

2：导出webpack方案

第一步：

npm run eject

第二步：安装包

npm install less-loader less --save

第三步：找到 webpack.config.js新增

第四步：再在sass后面配置less 改成less就行

3：使用 react-app-rewired 对 webpack 进行自定义配置（老版本）

第一步：安装插件修改启动命令

npm install react-app-rewired --save-dev
 
修改 package.json 中的脚本命令：修改如下
  "scripts": {
   "start": "react-app-rewired start",
  "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
   "eject": "react-app-rewired eject"
  }

第二步：新建配置文件 config-overrides.js

module.exports = function override(config, env) {  // 在这里添加配置  return config;}

第三步：安装依赖包 react-app-rewire-less

npm install react-app-rewire-less --save

第四步：修改 config-overrides.js 配置文件

const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
  // 只需要一条配置信息即可实现对less的支持
 config = rewireLess(config, env);
   return config;
}

4：react-app-rewired 新版本配置方法

第一步：npm install react-app-rewired customize-cra --save-dev

npm install react-app-rewired customize-cra --save-dev

第二步：修改 package.json 中的脚本命令

 
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
   "eject": "react-app-rewired eject"
  }

第三步：在项目根目录下(和 package.json 同级)新建配置文件 config-overrides.js

const { override } = require('customize-cra');module.exports = override();复制代码

第四步：安装依赖

npm install less less-loader --save-dev

第五步：修改 config-overrides.js

 
 const { override, addLessLoader } = require('customize-cra');
module.exports = override(
  addLessLoader({
    strictMath: true,
    noIeCompat: true
  })
)

三：总结

1：推荐使用caro方案，简单，好用

2：参考地址： caro方案