安装 scss
npm install sass-loader@10.1.1 --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>
