sass之mixin的全局引入（vue3.0）

1.scss文件（mixin.scss）

// 设置宽高

@mixin wh($w, $h) {
    width: $w;
    height: $h;
}

2.配置loader

//vue.config.js
 
css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/styles/mixin.scss";`
      }
    }
  }

低版本的用data

//vue.config.js
 
css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/styles/mixin.scss";`
      }
    }
  }

3.使用

<style lang='scss' scoped>
.header {
  @include wh(100px, 100px);
}
</style>

在css中直接使用@include调用mixin即可。