react配置less

1、npm run eject   暴露webpack配置文件

 

 

！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下

 

 
git add .
git commit -m '自定义名'
npm run eject 

 2、npm i less less-loader-s    安装相关依赖

npm i less less-loader-s  

 3、修改 webpack 配置
第一步：在webpack.config.js文件中找到如下代码，在sassModuleRegex后面加上

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

 

第二步：在module.rules.oneOf 下sassModuleRegex后面加上以下两段代码
  {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

 

 

当前的less和less-loader配置会导致报错

原因： less-loader安装的版本过高
解决方案： 1.npm install less-loader@6.0.0