Detailed explanation of Vue’s global introduction of bass.scss solution

This article mainly introduces the detailed solution for Vue's global introduction of bass.scss. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

In order to solve the problem of globally introducing scss variables and mixins in Vue components, a parser named "sass-resources-loader" is loaded.

Installation

$ > cnpm i -D sass-resources-loader

Configuration

If configured It is configured in the loader parser of vue, that is, the file built by the vue-cli scaffolding method is build/utils.js. The cssLoaders() method is defined in this file, which defines the css, less, etc. The analysis method is as follows.

// build/utils.js
exports.cssLoaders = function (options) {
 options = options || {}
 
 ...
 return {
  // ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  // 定义在这里 =======================》
  scss: generateLoaders('sass').concat(
   {
    loader: 'sass-resources-loader',
    options: {
     resources: path.resolve(__dirname, '../src/common/style/global.scss') // 需要全局引入的文件
    }
   }
  ),
  // 定义在这里 =======================》
  // ...
 }
}

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

// xx.vue
<style lang="scss">
 height: @include line-height(45px);
</style>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Preliminary understanding of JavaScript, Ajax, jQuery, and comparison of the relationship between the three

##The combination of jquery and php Implementing AJAX long polling

Jquery specific examples introduce when to use AJAX and where AJAX should be used

The above is the detailed content of Detailed explanation of Vue’s global introduction of bass.scss solution. For more information, please follow other related articles on the PHP Chinese website!