vue cli3.x project was introduced less global variables

Use project in less variable defines the theme colors of the project, where the use  style-resources-loader to be introduced globally.

Specific configuration is as follows:

1, the installation style-resources-loader, and select the language you want to use (in this project use less)

vue add style-resources-loader

 

After installation, style-resources-loader and vue-cli-plugin-style-resources-loader will be automatically added to the development environment dependent package.json; and generate the vue.config.js follows.

2, the configuration vue.config.js

// vue.config.js

const path = require("path");
module.exports = {

//...

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/style/theme.less')
      ]
    }
  }
}