1. 安装依赖：npm install node-sass sass-loader -D
2. webpack.base.conf.js文件
module: { { //手动添加这一条，相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} }
3. 在.vue文件中使用
<style scoped lang="scss"> .box{ width: 100%; :hover{ color: red; } } </style>
下面看下sass与scss的区别
用了很久css预编译器，但是一直不太清楚到底用的sass还是scss，直到有天被问住了有点尴尬，找了个教程撸了遍==。。。
1.异同：简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号
//sass 太费眼了 .father width:100px; .son width:50px; //scss 适合我这种眼瘸手残患者 .father{ width:100px; .son{ width:50px; } }
2 .scss功能很强大的样子，能做运算、写函数啥的，但是我只是作为语法糖用而已，只看了些基础功能
我个人常用的功能有：
嵌套
变量 $color : #111111;
混入 @mixin
继承 @extend
3.一个关于@mixin、@extend、%placeholder的适用场景总结
mixin 可以传变量
extend 不可以传变量，相同样式直接继承，不会造成代码冗余；基类未被继承时，也会被编译成css代码
placeholder 基类未被继承时不会被编译成css代码
总结：
以上所述是小编给大家介绍的vue安装和使用scss及sass与scss的区别详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: