安裝 scss

npm  install [email protected] --save-dev
npm install node-sass --sava-dev

注意：sass-loader需要指定@10的版本，因為後續的版本在vue-cli腳手架中會出現一些問題

基礎使用

<style lang="scss" scoped>
  .xxxx {
      .xxx-x {
      ...
    }
  }
</style>

大部分場景下，使用scss可以實現上面的樣式巢狀層級關係，相信大家都用過。

下面要說下scss的進階用法。scss 全域性變數和mixin。

環境設定

想要在vue-cli中全域性使用 scss的全域性變數和 @mixin樣式混入，需要安裝外掛，然後在 vue.conf.js 中設定

npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

vue.config.js  中設定

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        // 路徑根據具體需求更改
        path.resolve(__dirname, 'src/assets/styles/variables.scss'),
        path.resolve(__dirname, 'src/assets/styles/mixin.scss')
      ]
    }
  }
}

scss全域性變數的使用

上述環境設定中設定的 variables.scss 就是全域性的變數檔案

variables.scss 

$--color-primary: #468fff;
$--color-primary-active: #69a5ff;

xxx.vue 檔案中直接使用該變數

<style lang="scss" scoped>
.main-wrap {
    background: $--color-primary;
}
</style>

@mixin與@include實現css程式設計式風格

mixin.scss 
@mixin 函數名($引數名: 預設值)

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

xxx.vue 中使用
使用 @include 進行參照即可

<style lang="scss" scoped>
.main-wrap {
  @include flex(center,center,row);
}
</style>