Step 1: Install style-resources-loader, vue-cli-plugin-style-resources-loader

npm i vue-cli-plugin-style-resources-loader style-resources-loader  -D
Copy the code

Step 2: Define a themes.less file and load it with the global variables you want to use

@primary-color : #2d8cf0;
@info-color : #2db7f5;
@warning-color : #ff9900;
@error-color : #ed4014;
@normal-color : #e6ebf1;
@link-color : #2D8cF0;
Copy the code

Step 3: Add this code to vue.config.js

pluginOptions: {
    'style-resources-loader': {
       preProcessor: 'less'.patterns: [
          // Global variable path, cannot use path alias
          path.resolve(__dirname, './src/styles/default/themes.less')]}}Copy the code

Step 4: Use in style

<style lang="less">
.header {
    color:@primary-color; } < /style>
Copy the code