vue中全局引入scss（mixin）

使用 sass-resources-loader 工具

cnpm install sass-resources-loader

在 src/assets/style 目录中新建一个 mixin.scss 文件

@mixin border-radius ($radius: .10rem) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

@mixin border-box () {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

@mixin display-flex () {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex-num ($num:1) {
  -webkit-box-flex: $num;
      -webkit-flex: $num;
          -ms-flex: $num;
              flex: $num;
}

@mixin flex-align-items ($align:center) {
  -webkit-align-items: $align;
    -webkit-box-align: $align;
       -ms-flex-align: $align;
          align-items: $align;
}

@mixin flex-justify-content ($justify:center) {
  -webkit-justify-content: $justify;
         -webkit-box-pack: $justify;
            -ms-flex-pack: $justify;
          justify-content: $justify;
}

@mixin flex-wrap ($wrap:nowrap) {
        -webkit-flex-wrap: $wrap;
            -ms-flex-wrap: $wrap;
                flex-wrap: $wrap;
}

@mixin display-flex-customize ($justify: center, $align: center) {
  @include display-flex();
  @include flex-justify-content($justify);
  @include flex-align-items($align);
}

@mixin display-flex-center () {
  @include display-flex-customize();
}

@mixin display-flex-start-center () {
  @include display-flex-customize(flex-start);
}

@mixin display-flex-space-between-center () {
  @include display-flex-customize(space-between);
}

//绝对居中
@mixin absolute-center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// 不换行。。。
@mixin text-ellipsis(){
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

//强制换行
@mixin break-word {
  word-break: break-all;
  word-wrap: break-word;
}

然后在项目的根目录下，新建 vue.config.js 文件，输入以下内容

// vue.config.js
module.exports = {
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // Provide path to the file with resources
                    // 要公用的scss的路径
                    resources: './src/assets/style/mixin.scss'
                })
                .end()
        })
    }
}

然后在 .vue 文件中，就可以直接使用了

// home.vue
<style lang="scss" scoped>
    .home-index{
		.home-nav{
			@include display-flex-customize(space-around);
		}
	}
</style>