在react项目中使用less样式(需要在webpack.config.js中配置)
·
1.需要下载less和less-loader,且把less-loader降到6.0.0
cnpm i less less-loader@6.0.0 -S
2.运行npm run eject使得自动生成webpack.config.js文件,对其进行修改配置
3.在webpack.config.js里面,添加如下代码:
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
4.修改公共函数getStyleLoaders(),添加如下参数:

5. 在配置sass的loader下面添加less配置的loader
{
test: lessRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
{
lessOptions:{
javascriptEnabled: true
}
}
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
{
lessOptions:{
javascriptEnabled: true
}
}
),
},
6.npm run start重启项目即可
更多推荐
所有评论(0)