【学习记录8】vue项目中全局引入cass（scss）变量和sass（scss） mixin

一、全局引入cass（scss）变量和sass（scss） mixin，这样就可以直接使用变量和mixin了，不用给每个vue文件都import相关文件

1、使用场景

variable.scss文件样例

// 颜色定义规范
$color-background: #222;

mixin.scss文件样例

// 背景图片
@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}

 在.vue文件中使用

<style lang="scss" scoped>
    // 此处省略了使用import相关ccss文件
  .header {
    height: 44px;
    text-align: center;
    color: $color-background;
    @include bg-image('logo');
    
  }
</style>

2、在VUE项目根目录下创建vue.config.js，并在其中加入如下配置

下面的配置有版本要求，需要最新版本，才支持下面的配置，目前使用的是

"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 全局引入变量和 mixin
        additionalData: `
          @import "@/assets/scss/variable.scss";
          @import "@/assets/scss/mixin.scss";
        `
      }
    }
  }
}