项目背景

脚手架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'
                    }
                }
            }
        }
    }
    ...
}