Vue.js中scss的使用

scss是什么？

与sass一样scss是css预处理语言的扩展，允许使用变量，嵌套，混合，导入，继承等功能，相比起原生的css结构更清晰，写起来方便的多。

---

引入scss方法

1、安装依赖sass-loader依赖于node-sass：

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

提示：这里需要注意项目中的node,sass-loader和node-sass版本一致性，不然编译会报错：

 解决方法如下：

Module build failed: TypeError: this.getOptions is not a function报错解决方案_YOGiii的博客-CSDN博客

2、添加配置：

1.在asstes文件夹下建立一个scss文件夹 然后创建一个 variable.scss文件 用来存储全局变量。

2、通过vue,config.js配置

这里有几个坑记录一下：

对于不同版本的sass-loader配置中的属性不同

7.0 以前是data

8.0 是perpendData

9.0 是additionalData

其次我在起另一个项目时候碰到了全局变量引入失败的情况，原因暂时没找着，不过找到了用sass-resource-loader在build中配置的方法：

记一次sass 全局配置全局变量的使用以及注意点_我仰泳一级棒的博客-CSDN博客_sass全局变量

关于vue,config.js的详解：

Vue.config.js配置文件_Elric Shen的博客-CSDN博客