装置 scss

npm  install sass-loader@10.1.1 --save-devnpm 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>