react添加less

webpack版本很重要
不同的版本要对应不同的版本
加不同的配置
所以要注意不同的版本和不同版本的配置
因为大部分bug,来源于此

我项目中的webpack版本
npx create-react-app antd-demo-ts --template typescript

 "webpack": "4.44.2",
 "webpack-dev-server": "3.11.1",
  "webpack-manifest-plugin": "2.2.0",
  "workbox-webpack-plugin": "5.1.4"

流程

第一步暴露webpack配置
npm run eject
第二步 安装 less less-loader 版本一定要注意和我一样
npm install less-loader@7.3.0 --save-dev

第三部 进入目录config/webpack.config.js
// 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$/;

大概在500行左右的位置
也就是cssModuleRegex后面 
sassRegex前面的地方复制下面的代码

让后重启项目yarn start 或者 npm run start
就支持.less 和 .module.less的文件了
  {
            test: lessRegex,
            exclude: lessModuleRegex,
            use:getStyleLoaders(
              {    
              importLoaders:2,
              //moudles: true,              //模块化　　
               sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                },
                'less-loader'
            ),
            sideEffects:true,
          },
          {
            test: lessModuleRegex,
            use:getStyleLoaders(
              {
                importLoaders:2,
               sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
              },
              'less-loader'
            )
          },

第四部
创建index.module.less文件并且导入
报红线找不到
进入react-app-env.d.ts
复制添加下面代码
declare module '*.module.less' {
  const classes: { readonly [key: string]: string };
  export default classes;
}