项目背景
- 脚手架vue-cli：4.x
- vue: 3.x
- less-loader: 7.x
安装less less-loader:
npm install less less-loader --save-dev
配置
vue.config.js：
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
globalVars: {
primary: '#fff'
}
}
}
}
...
}
启动报错如下：
Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.- options has an unknown property 'globalVars'. These properties are valid: object { lessOptions?, additionalData?, sourceMap?, webpackImporter? }
image.png
根据报错，我们可以看到
javascriptEnabled和globalVars是不合理的options，期望得到的属性是lessOptions等
解决方法
方法一
修改配置如下：
module.exports = {
css: {
loaderOptions: {
less: {
// 属性值包裹在lessOptions内
lessOptions: {
javascriptEnabled: true,
globalVars: {
primary: '#fff'
}
}
}
}
}
...
}
方法二：
less-loader版本降级至5.0.0版本
