Introducing Global SCSS in VUE-CLI projects

Load a global settings file

It is a common requirement to load a setup file in each component without explicitly importing it each time. For example, use the SCSS variable globally for all components. In order to achieve this goal:

npm install sass-resources-loader --save-dev

Then add the following Webpack rule:

{  ‘sass-resources-loader‘,  options: {    resources: path.resolve(__dirname, ‘../src/style/_variables.scss‘)  }}

For example, if you are using Vuejs-templates/webpack, please modify the following build/utils.js :

scss: generateLoaders(‘sass‘).concat(  {    loader: ‘sass-resources-loader‘,    options: {      resources: path.resolve(__dirname, ‘../src/style/_variables.scss‘)    }  }),

In this file, to avoid duplicate CSS in the final compiled file, it is recommended to include only variables, mixins, and so on.

Source: Vue-loader Official documentation

Https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

Introducing Global SCSS in VUE-CLI projects