如何正确安装sass依赖包

在项目开发中，我们经常使用 scss 语法，其书写方便，有利于代码维护，但是在使用 scss 语法之前需要正确下载 sass 依赖包，但在下载的过程中经常失败，所以如何寻找到正确的下载之法就显得尤为重要了。在讲解正文之前呢，我们需要先了解一下 sass 和 scss 的一些区别和联系，这样更有助于对整个知识的了解。

1.sass 是什么

sass 是成熟、稳定、强大的 css 预处理器，其语法完全兼容 css3

2.scss 是什么

scss 是专业的 css 拓展语言，是 sass3 引入的新语法，是sassy css 的简写，是 css3 的超集，所有有效的 css3 样式同样也适用于 sass，也就是说 scss 是 sass 的升级版。其语法完全兼容 css3，并且继承了 sass 的强大功能。也就是 css3 样式表都是具有相同语义的有效 scss 文件。另外，scss 还能识别大部分 css hacks 和特定于浏览器的语法。
由于 scss 是 css 的拓展，因此，所有 css 中正常工作的代码也能在 scss 中正常工作。

3.sass 与 scss 的异同

sass 和 scss 其实就是同一种东西，平时都称之为 sass，两者之间不同之处主要有以下两点：

（1）文件名拓展名不同

sass 是以 “.sass” 作为后缀拓展名，scss 是以 “.scss” 作为后缀拓展名

（2）语法书写方式不同

sass 是以严格的缩进式语法规则来书写，不带花括号和分号。
scss 的书写方式和 css 的书写方式相似。

4.下载 sass 依赖包

可以先安装sass-loader，再安装 node-sass 或者 sass。

npm install sass-loader@7.0.1 --save-dev
npm install node-sass@7.0.1 --save-dev

5.注意事项

（1）若一直下载不下来，查看Node版本是否过高

（2）若报错可以清除浏览器缓存，重新运行项目

（3）下载依赖版本不对，重新下载

欢迎大家关注我的公众号，我也会在公众号同步更新。

若大家对进阶打怪有兴趣的话，欢迎订阅以下专栏
地址：WebGIS入门和进阶实战

项目地址，请查阅

地址：leaflet-app