Vue3.0 configures less and uses global variables

1. Install dependencies in the project

npm i less less-loader -s -D

2. Install configuration dependencies in the project

npm i style-resources-loader vue-cli-plugin-style-resources-loader -s -D

3. Write global less

4. Configure webpack in vue.config.js 

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/styles/common.less')
      ]
    }
  }
}

5. Just reference it directly in the component