说明:所有修改均在config/webpack.config.js文件
安装 less 支持组件
yarn add less-loader less
在文件中添加 less 规则
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
+const lessRegx = /\.less$/;
+const lessModuleRegex = /\.module\.less$/;
添加 loader 信息
//修改getStyleLoaders方法中下属内容
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
+javascriptEnabled: preProcessor === 'less-loader' /
},
});
}
// 在 module:{}中的 rule 下增加下述 less-loader 信息
//less相关配置
//普通模式
{
test: lessRegx,
exclude: [lessModuleRegex],
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
//module 模式
{
test: lessModuleRegex,
exclude:[/node_modules/],//针对第三方的 less 文件不进行 module 化
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
}
