项目背景

• 脚手架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? } 根据报错，我们可以看到javascriptEnabled和globalVars是不合理的options，期望得到的属性是lessOptions等

解决方法

修改配置如下：

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