react中配置less

react框架中会默认隐藏一些依赖包和webpack 配置文件。

1.运行 npm run eject暴露配置文件

(运行npm run eject 可能会报错，直接git add . 、git commit -m '' 提交文件可以解决)

npm run eject

运行命令之后多出config和scripts两个文件

2.安装两个依赖包less和less-loader

npm i less
npm i less-loader

3.修改config文件夹下的 webpack.config.js文件

1.修改style files regexes（样式文件正则），找到 注释style files regexes，在这部分最后添加如下两行代码：

 

 2.修改 getStyleLoaders 函数，添加代码

3.模仿代码中提供的sassRegex代码，添加如下代码

 //手动配置的less文件
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
            },

  以上就是react框架配置less的详细过程。！！！修改配置文件要重启vscode

最后启动时报错

./src/app.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/less-loader/dist/cjs.js!./node_modules/postcss-loader/s/cjs.js!./node_modules/postcss-loader/src??postcss!./src/app.css)

方法

npm uninstall less-loader
npm i less-loader@5.0.0

参照链接在react中配置less - 夕色琉璃 - 博客园