.xxxx{.xxx-x{...}}安装scssnpminstallsass-loader@10.1.1--save-devnpminstallnode-sass--sava-dev注意：sass-loader需要指定版本@10，因为后续版本在vue-cli脚手架中会出现一些问题基本使用.xxxx{.xxx-x{...}}大多数场景下，使用scss可以实现上面的样式嵌套层次，相信大家都用过。下面说说scss的高级用法。scss全局变量和混合。环境配置如果想在vue-cli中全局使用scss全局变量和@mixin风格混合，需要安装插件，然后在配置npminstallstyle-resources-loadervue-cli-plugin-style-resourcesvue.conf.js-loader--save-devvue.config.jsConfiguremodule.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全局变量使用配置的变量在上面的环境配置中。scss是全局变量文件variables.scss$--color-primary:#468fff;$--color-primary-active:#69a5ff;xxx.vue文件中直接使用这个变量。main-wrap{background:$--color-primary;}@mixin和@include实现css编程风格mixin.scss@mixin函数名（$参数名：默认值）@mixinflex($justify-content:center,$align-center:center,$flex-direction:row){显示:flex;证明内容：$证明内容；对齐项目：$对齐中心；弹性方向：$弹性方向；}xxx.vue使用@include可以立即引用.main-wrap{@includeflex(center,center,row);}
