vue:vue使用scss

为了使用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>

猜你喜欢

转载自www.cnblogs.com/llqwm/p/9152091.html