Detailed explanation of the global introduction of Vue

To solve the global introduction of scss variables and mixins in Vue components, a parser named "sass-resources-loader" is loaded.

Install

$ > cnpm i -D sass-resources-loader

Configuration

For configuration, it is configured in the loader parser of vue, that is, in the file built in vue-cli scaffolding, the cssLoaders() method is defined in the file, which defines the parsing methods such as css and less, as follows.

// build/
 = function (options) {
 options = options || {}
 
 ...
 return {
  // ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  // Definition here ==================================>  scss: generateLoaders('sass').concat(
   {
    loader: 'sass-resources-loader',
    options: {
     resources: (__dirname, '../src/common/style/') // Files that need to be imported globally    }
   }
  ),
  // Definition here ==================================>  // ...
 }
}

// 
@mixin line-height($height) {
 height: $height;
 line-height: $height;
}
$head-height: .45rem;

// 
&lt;style lang="scss"&gt;
 height: @include line-height(45px);
&lt;/style&gt;

suggestion

In , only variables or mixins are needed.

refer to

/zh-cn/configurations/

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.