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,
},
}