vue-cli method to configure global sass and less variables

1. Global configuration less

1. Download the plugin

**vue add style-resources-loader**
vue add pluginName yesvue-cli3Provided。vue add yes用yarnInstall plug-in， yarnSource problems may lead to failure。If the above installation fails，Install separately style-resources-loader and vue-cli-plugin-style-resources-loader（前提yes已经安装过 less less-loader）
// If nothing goes wrong, you can ignore this place npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
 or 
 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
**

Step 2 Configuration


const path = require("path");
   = {
   ...
   pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
       //This is the path to add it.       //Note: I have tried not to use alias path       (__dirname, "./src/assets/")
       ]
     }
   }
   ...
  }

Or use the automatic import of the official website to introduce it in chainWebpack

/zh/guid...

2. Global configuration sass (direct configuration)

Note: The official website only loves sass. This loader form is only applicable to sass, and other (less, stylus) will report errors.

 = {
  ...
  css: {
    loaderOptions: {
      sass: {
       // @ is an alias for src       data: `
        @import "@/assets/";
       `
      }
    }
  }
  ...
 }

Summarize

The above is the method of configuring global sass and less variables by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!