Project background

  • Scaffolding VUE-CLI: 4.x
  • vue: 3.x
  • less-loader: 7.x

Install less less – loader:

npm install less less-loader --save-dev
Copy the code

configuration

Vue. Config. Js:

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
                globalVars: {
                    primary: '#fff'
                }
            }
        }
    }
    ...
}
Copy the code

The startup error is as follows: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? } According to the error report, we can seejavascriptEnabledandglobalVarsIs not reasonable options, the expected property islessOptionsEtc.

The solution

Modify the configuration as follows:

Module. exports = {CSS: {loaderOptions: {less: {// attributes are included in lessOptions. LessOptions: {javascriptEnabled: {loaderOptions: {CSS: {loaderOptions: {less: { true, globalVars: { primary: '#fff' } } } } } ... }Copy the code