如何五分钟搞定Vue + Sass？
首先，大家知道在网站开发项目的过程中，大家都普遍使用css预处理器了。
也就是less，sass,stylus这三个东西，这三者的话也确实没有让大家失望。
让我们的开发效率提升很多，里面有很多好用的功能，变量，嵌套，循环，继承，混合等等。
不过这三者里面呢，less功能稍微欠缺了点。
而stylus的话呢，由于写法比较新颖，我个人不太接受，所以今天要讲的还是sass。
其实，早在2007年sass就诞生了。
只不过那时候前端的概念在国内还不是特别普及，随着2014年html5的发布，国内大前端的兴起，sass自然也就走进大家的视野了。
不过呢，由于以前sass在安装方面比较麻烦的原因，所以大家更偏向于less。
然而，随这前端框架vue，react的兴起，sass的使用率也在进一步飙升。
那么，今天就来讲讲在框架里面，怎么去使用sass。
这里以Vue为例，使用Vue-Cli进行案例开发讲解。
首先，要使用Vue的话呢，最简单的方法当然就是使用脚手架 Vue-Cli了
使用vue第一步：安装Node
官网链接：http://nodejs.cn/download/
目前前端大多数工具都是需要用到node的，所以node必须要安装哦。
去官网，根据自己的系统选择对应的版本，点击下载，然后安装就好了。
更多关于 vue 安装的问题和解答，点击查看下面这份前端学习资料（web全栈和web架构师的学习资料以及大厂面试指南等等
JS项目实战、Vue高级课程、web面试专题课，打包送给你
知乎营销平台
使用vue第二步
使用node的包管理工具npm安装Vue-cli : npm install -g @vue/cli
npm是node的包管理工具，就像电脑里的金山软件管家一样，利用它可以进行安装卸载一些软件。
不过这个是需要在命令行里面进行使用的，mac是打开终端，windows直接打开cmd就好了。
打开之后大概长这个样子：
是不是看起来就很黑科技，哈哈。
在这里面输入安装命令：
npm install -g @vue/cli
就可以了。
安装好了之后会有提示，大概长这个样子：
不过要注意哦！！
在这一步，mac的同学可能会遇到权限不够的问题。
如果失败了，可以尝试在命令前面加上sudo， 像这样：
sudo npm install -g @vue/cli
之后会要求输入电脑的开机密码，输入的时候不会有任何提示。
只管输入就好了，输入之后回车就开始安装啦！
使用vue第三步就可以开始创建我们的vue项目了。
先找到一个目标文件夹, 进入目标文件夹之后直接使用命令：
vue create projectname
（projectname可以随意命名，要求：英文名并且全小写）
比如说在我的桌面上有一个文件夹，叫做myProject, 我想要在这里面去创建vue项目
那么首先我需要在命令行（终端/CMD）里进入到这个文件夹。
使用cd命令：cd desktop/myProject
然后运行创建命令：
vue create testvue
有任何卡顿的地方直接按回车就好了，等待命令行一顿操作猛如虎之后，我们的项目就创建好了：
可以发现myProject里面就多出来了一个testvue的文件夹。
并且打开可以看到里面还有很多文件：
到目前为止，我们的项目就已经创建好了，接下来就可以愉快的coding啦！
现在，用编辑器打开我们的项目就会比较清晰了：
vue项目中，我们的代码就放在src里面就可以了。
目前我们可以直接去修改App.vue这个文件，右边大家也看到这个文件里的内容了。
其实就是一些html结构，几行js代码。
最底下还有一些样式，现在可以看到这些样式都是用css来写的，我们先来看看项目的样子吧。
还是在命令行里，现在要进入到更深一层文件夹，之前我们已经进入到myProject这个文件夹里了。
现在我们要进入到下一层，也就是我们创建的那个testvue文件夹里，还记得要使用什么命令么？
直接在命令行里输入：cd testvue就可以啦（如果你对命令行操作有问题，欢迎来找我深入了解哦）
进入之后就可以启动项目啦，在命令行里输入：npm run serve，然后回车。
这时候命令行又会一顿操作猛如虎，然后你就可以看到这样的画面了：
那么恭喜你，项目成功运行，现在吧上面提示的地址：http://... 那一串（任选一个）复制。
然后去浏览器里粘贴就可以打开啦。
现在我们看到的，就是app.vue那个文件里所呈现的内容了，我们可以尝试去修改一下
我在这里加上了一行文字，然后再回到浏览器里：
这行文字就神奇的出现了，那么到此为止，你就学会使用Vue了，是不是特简单。
哦，对了，忘了今天的另一个主角：sass
那么想要在vue里面使用sass的话就更简单了。
接着往下看，还是回到命令行。
首先我们需要把刚才启动的项目暂停，直接在命令行里按Ctrl + C就可以暂停了
在vue里使用sass第一步
安装loader
Vue Cli已经帮我们把必要的东西都集成进去了，不过我们还需要安装两个依赖。
一个是sass-loader sass-loader依赖于node-sass, 所以还需要安装一个node-sass。
直接在编辑器里打开命令行工具进行安装就可以了。
这样可以省去用cd命令进去我们项目文件夹的时间：
点开它，然后在里面就可以输入命令了:
此时命令行再次操作猛如虎，其实也就没我们啥事了。
这一步依然有可能会失败，大家可以多尝试几次。
或者把这两个分开安装，或者参考：
https://blog.csdn.net/q213546879/article/details/89313390
这篇文章进行操作
安装好了之后，在package.json文件里就可以看到他们了：
在vue里使用sass第二步
加个属性：
到目前为止，我们一切准备就绪，接下来，见证奇迹！
再次打开app.vue文件，在最底下的style标签上加上一个属性：lang=”scss” 就可以了：
在这里就用sass的嵌套语法写了一个box。
并且给它添加了一个红色的背景，保存之后运行项目：npm run serve, 然后回到浏览器：
那个可爱的小红方框就已经在页面上了，至此，我们就成功的在vue里使用sass了。
在这里的话，其实vue-cli帮我们做了很多事情，包括webpack都已经帮我们处理好了。
有兴趣的同学可以看看源码：
打开css配置文件，里面有less的配置，sass以及stylus等配置……
甚至还有postcss等等好东西，等着大家去发现哦~
JS项目实战、Vue高级课程、web面试专题课，打包送给你:
知乎营销平台
