Vue
使用vue-cli创建的项目,若要使用less,只需要下载less和less-loader即可,不需要变更webpack配置
npm i less less-loader@5.0.0 -S
less-loader的版本不能过高,否则会出错
React
安装less和less-loader
npm i less less-loader -S
更改webpack.config.js配置
react脚手架中有对SASS的支持,仿照着添加以下代码
//将正表达式抽出
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
//在module中的rules内添加以下规则,第一个规则是针对 .less 文件的
//第二个规则是针对 .module.less 文件的
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
"less-loader"
)
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
}