Sass教程五：koala 和在Vue里使用Sass

第三种，编译软件 Koala

附上官网地址： http://koala-app.com/

这是一个小软件，在官网上下载安装就可以了，官网可以自动分辨是windows系统还是Mac系统，所以直接点击下载就可以了。

根据提示，直接把要编译的文件拖到软件里或者把整个文件夹拖到软件里就可以了 

点击某个文件，右边就会弹出来一个菜单，勾选最上面的 Auto Complie就可以自动监听啦，然后下面有一些选项，比如我们之前提到过的 四种编译格式：sass提供四种编译格式： nested、expanded、compact、compressed都可以在这里进行选择，最后点击最下面的compile就完成了

第四种，在框架里用sass

今天的前端环境，框架已经成为开发主流了，所以这方面需要大家下点功夫去研究了，在这我就说在Vue里该如何去是用sass吧 

首先我们用Vue Cli来搭建一个简单的项目

先安装Vue Cli，对Vue Cli不了解的话可以去官网看看介绍

Vue Cli可以通过npm包管理器直接安装，所以我们可以直接输入命令：

npm install -g @vue/cli

或者使用yarn包管理器：

yarn global add @vue/cli

安装完成之后同样还是检查以下有没有安装好：

vue --version

安装好Vue Cli之后就可以直接使用Vue命令创建一个项目啦：

vue create projectname

在这里注意几点：

• 注意先进入你要创建项目的文件夹，用cd命令
• projectname你可以自定义，符合命名规范即可，不过不能出现大写字母
• vue创建项目之后，会在你的文件夹里面新建一个以projectname命名的文件夹，项目的主目录也即是它了
• 创建项目之后需要进入到项目文件夹里才能运行项目

创建好项目之后用编辑器打开，大概就长这样了：

Vue Cli已经帮我们把必要的东西都集成进去了，不过我们还需要安装两个依赖，一个是sass-loader sass-loader依赖于node-sass, 所以还需要安装一个node-sass, 直接在编辑器里打开命令行工具进行安装就可以了，这样可以省去用cd命令进去我们项目文件夹的时间

打开之后： 

注意观察当前所处的文件夹！！！然后直接输入命令：

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

原本sass文件处理好了之后还需要交给css-loader style-loader都处理一遍的，但是Vue Cli已经帮我们处理好了，就连webpack的配置都已经处理好了所以我们就不需要去管后面的过程了，当然有兴趣的同学也可以去了解一下webpack里面会有详细的解说.

安装好了之后在package.json文件里可以看到，版本可能不一样，这种细节不需要在意，嘿嘿~ 

一切准备就绪，接下来就可以开心的撸代码啦！ 

随便找一个Vue文件，然后在style里面就可以直接写sass代码了，不过要注意在style标签上加上 lang="scss" 这个属性，注意在这里scss和sass是有区别的哦！

然后直接输入命令：

npm run serve

把项目跑起来就可以啦！

常见安装失败处理方法：

把npm资源切换到国内淘宝镜像：

• 淘宝 npm 地址： http://npm.taobao.org/
• 通过cnpm使用 ：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 临时使用：npm --registry https://registry.npm.taobao.org install express

另外附上Node-sass安装失败的原因及解决办法