1.配置sass中遇到的一些坑

我本地的vue-cli的版本@vue/cli 4.3.1，这个版本脚手架创建的vue项目配置全局sass的时候需要在vue.config.js中指定prependData而不是data，具体不知道官网啥时候改动的。

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        // data: `@import "~@/assets/scss/common.scss";`,//以前版本的配置
        prependData: `@import "~@/assets/scss/common.scss";`,//改成现在版本的配置
      },
    },
  },
};

2.sass在vue中的一些基本操作

创建全局变量

创建全局的css文件common.scss，写一个变量。

$bg: #16110d;

页面中引用

<style lang="scss" scoped>
.textBox {
  width: 100%;
  background: $bg;
  padding: 0 20px;
}
</style>

sass中的@mixin

common.scss文件中创建

@mixin flexContent($content, $items, $wrap) {
  display: flex;
  flex-wrap: $wrap;
  justify-content: $content;
  align-items: $items;
}

使用

<style lang="scss" scoped>
.textBox {
  @include flexContent(space-between, center, nowrap);
  width: 100%;
  background: $bg;
  padding: 0 20px;
}
</style>

scss中的@extend

common.scss文件中创建

.baseFlex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

使用

<style lang="scss" scoped>
.textBox {
  @extend .baseFlex;
  width: 100%;
  background: $bg;
  padding: 0 20px;
}
</style>