vue：vue使用scss

标签：lob   全局   span   scope   color   node-sass   node   lang   css   

为了使用sass，我们需要安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

要使用sass的vue模块修改style的lang
<style lang="sass">

npm run dev会报错，是因为sass和scss和常规css语法有差别
sass不加大括号，scss加大括号
习惯了原先css的写法就用scss

变量和父级元素中操作子级元素，设置变量，长度要加引号，加上!global就变为全局变量：
<style scoped lang="scss">
*{
/*绿色*/
$colorPink:green !global;
}
.box{
padding: 1rem;
color: $colorPink;
p{
font-size: 0.3rem;
span{
color: pink;
}
}
}
</style>

vue：vue使用scss

标签：lob   全局   span   scope   color   node-sass   node   lang   css   

原文地址：https://www.cnblogs.com/llqwm/p/9152091.html