VUE项目中SASS的使用及说明

最近在做vue脚手架搭建项目，下一步希望实现响应式布局，查找的资料说要实现vue的响应式布局，就要用到sass。

然后决定一步步来，先学习使用sass。

下载Ruby

安装sass之前必须先安装Ruby,Ruby下载的地址为：https://rubyinstaller.org/downloads/

找到适合自己电脑的版本下载就可以了。

安装Ruby

下载完Ruby的安装包之后，勾选“Add executables to your path” 选项，点击下一步（很多都会默认选择了这个选项）。

在安装的过程出现了要安装SYS的选项，我只是想要简单地使用一下Ruby来安装sass而已，所以并没有勾选这个选项，安装完发现不选这个选项并没有影响我使用sass。

安装sass

在命令行输入gem install

sass使用sass

我是看Sass官网的基础入门教程的，基本的使用说得很详细，传送门：

https://www.sass.hk/guide/

在vue使用sass

上面说的是sass的基本语法，最终目的还是要在vue中使用sass，但是我遇到了许多问题：

1.安装sass依赖包

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

直接安装node-sass报错，所以使用了淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）
$ cnpm install node-sass --save-dev （使用淘宝镜像安装node-sass）

一些教程说要进入webpack.base.config.js文件更改配置，我用的是最新的脚手架，所以根本就没有这个文件，其实好像安装的时候会自动配置好的，后来也能正确使用sass。

2.webstorm弹出提示询问要不要file watcher

我选择了no

3.在App.vue的style

style lang=‘sass'

4.在App的style中引入新建的sass文件

完成上面的一系列操作之后，怀着忐忑的心情在test.sass文件中放入以下代码：

$highlight-color: #F90
  h1 {
    color: $highlight-color;
}

然后编译器报错了！！！

语法问题，等我把中括号和分号去掉之后，报错消失了，好迷茫

虽然正常显示和使用了，但是对于为什么用了中括号和分号会报错，还需要进行下一步的探究，这一次就先到这里，有结果再进一步补充。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。