CSS样式--SCSS(三)

一、SCSS和SASS 有什么区别

· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”
· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；
· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言。

二、安装sass 依赖包

如果项目创建中已安装，无需再次安装：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

cli2需配置：
在build文件夹下的webpack.base.conf.js的rules里面添加配置：

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

三、VUE引入SCSS

使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法：

四、SCSS语法

1. 注释
   注释分为三种：/* /css中显示，// css中不显示，/重要注释!*/压缩不会被删掉。
2. 导入外部样式

@import './test.scss'; // 导入外部scss文件

五、常见问题：

1.解决Error: ENOENT: no such file or directory, scandir

D:\vue\vue-manage-admin>npm rebuild node-sass