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后面加上lessRegex和lessModuleRegex两个变量

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

  

• 第二步：在module.rules.oneOf 下sassModuleRegex后面加上以下两段代码，因为react默认支持sass，所以只需要把sass的配置方法复制一份给less。

{
              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 uninstall less-loader
2.

npm install less-loader@6.0.0

解决less嵌套样式不生效的问题 

把下面的代码加到webpack中getStyleLoaders方法里css-loader下面

const getStyleLoaders = (cssOptions,lessOptions, preProcessor) => {
	{
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },
	}