1、安装less-loader
yarn add less-loader
2、暴露配置信息
yarn ejcet
3、找打config/webpack.config.js
4、添加lessRegex和lessModuleRegex
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
5、添加less-loader支持
{
loader: require.resolve('less-loader'),
options: lessOptions,
},
6、将cssRegex的配置复制一份,放在cssRegex后面
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}, 'less-loader'),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}, 'less-loader'),
}
7、遇到的问题
(1)编译出错
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema
将less-loader@8.0.0变为less-loader@5.0.0
(2)css、less设置不生效
需要在父类的div节点上设置,在组件上设置不生效。