Vue+sass defines the global variable, the suffix name. SCSS Error Resolution

Vue in the current programmer circle, is already well-known, then in the process of using Vue we often use the powerful CSS preprocessing language sass, then in this process we have a variety of problems, we will briefly introduce one of the small part of the problem encountered;

In using SCSS, we defined variables to make it easy to change the color of the entire project, so wemain.jsThe introduction of globalscssfile, but directly intoscssThe file will be error-

So we have two ways of dealing with this kind of problem.

First, the introduction of the various components (the drawbacks of this method is believed to be seen, is the need to introduce in each component, write duplicate code) as follows:

Import: /assets/css/common.scss;

In this way it is obvious that each of our programmers is not recommended ;

Second, Global introduction

First, you need to install a development plugin: Sass-resources-loader

NPM I sass-resources-loader--save-dev

Then, modify the Build/utils.js file in our scaffold, modify the Scss loading settings

return {     css: generateloaders (),    postcss:  Generateloaders (),     less: generateloaders (' less '),      Sass: generateloaders (' sass ',  { indentedsyntax: true }),     scss:  generateloaders (' sass '),      stylus: generateloaders (' stylus '),      styl: generateloaders (' stylus ')  } 

modified to:

 return {     css: generateloaders (),      Postcss: generateloaders (),      less: generateloaders (' less '),      sass: generateloaders (' sass ',  { indentedsyntax: true }),      scss: generateloaders (' sass '). Concat ({          loader:  ' Sass-resources-loader ',          options : {             resources:  Path.resolve (__dirname,  '. /src/assets/css/common.scss ')           }      }),      stylus: generateloaders (' stylus '),      styl: generateloaders (' stylus ')   }

The project is then restarted and a common constant file is introduced in the main.js.

Vue+sass defines the global variable, the suffix name. SCSS Error Resolution