Sass 的安装使用（ 在vue中使用Sass SCSS， 用npm安装）及安装报错的解决方法

---

一、Sass是什么？

Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

Sass官方网站

二、Sass的安装

安装node-sass / 安装sass-loader

npm install node-sass --save-dev 			

npm install sass-loader --save-dev 		

三、使用

<style lang="scss" scoped>
.container {
  .content {
    background-color: aquamarine; //用于测试
  }
}
</style>

四、问题及解决

4.1报错信息：

4.1解决原因分析

sass-loader 和 node-sass 版本不匹配
自己安装了什么版本的，可以在package.json 文件中查看 :
"sass-loader": "^7.3.1", "node-sass": "^4.14.1",

4.2解决方法

将 sass-loader 和 node-sass 在安装的时候 将版本匹配好，指定安装那个版本。

步骤：
1、 先将前面安装好的 卸载
1.1 卸载当前的sass-loader版本：

npm uninstall sass-loader   

1.2 卸载当前的Node Sass版本：

npm uninstall node-sass  

2、再安装指定版本

npm install sass-loader@7.3.1 --save-dev

npm install node-sass@4.14.1

3、注意点：在安装完 之后 可能项目还是报错；项目重启 可能会解决。（刚刚自己就遇到了这样的问题）