一、概述
CSS 预处理器
SCSS是一种CSS预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS
SCSS和SASS区别
· 文件扩展名不同,文件后缀分别是“.scss”和“.sass”
· sass是以严格缩进语法规则来编写代码的,不包括大括号和分号,而scss的语法和css书写语法类似;sass的安装和使用不细说了;
· scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,是一种SCSS-like语言,弥补了sass和css之间的鸿沟;
二、安装scss
指定sass-loader版本
npm install node-sass sass-loader@7.3.1 style-loader --save-dev
注意:默认会安装最新版本,启动后会报错:
Module build failed: TypeError: this.getOptions is not a function
由于新版本有较大改动,因此安装老版本,可以避免上面的错误。
如果已经安装了高版本sass-loader,请手动修改package.json,将版本修改为7.3.1,并删除整个node_modules目录,执行npm install命令,重新安装一次即可。
三、使用scss
<style scoped lang="scss"> .hello { p { color: red; } } </style>
本文参考链接:
https://blog.csdn.net/zhouzuoluo/article/details/81010331
https://www.cnblogs.com/florazeng/p/13554174.html