项目背景

• 脚手架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

解决方法

方法一

修改配置如下：

module.exports = {
    css: {
        loaderOptions: {
            less: {
                // 属性值包裹在lessOptions内
                lessOptions: {
                    javascriptEnabled: true,
                    globalVars: {
                        primary: '#fff'
                    }
                }
            }
        }
    }
    ...
}

方法二：

less-loader版本降级至5.0.0版本