VUE2.0中集成Sass
Step1：在项目中安装Sass
1 npm install node-sass --save-dev
2 npm install sass-loader --save-dev
Step2：配置Sass解析器
在webpack.base.conf.js中，modules结节下的loaders结节中添加es2015的支持，如下所示：
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
],
}
PS：不安装的话会出现如下错误：Couldn't find preset "es2015" relative to directory
同样是在webpack.base.conf.js中，modules结节下的rules节点中添加sass的解析器，如下所示：
module: {
rules: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
Step3：尝试使用Sass的SASS语法
<style lang="sass">
$body-color: red;
.body
color: $body-color;
</style>
Step4：尝试使用Sass的SCSS语法
<style lang="scss">
$body-color:red;
.body {
color: $body-color;
}
</style>
样式依然生效。
说明：这个只是最简单的例子，而且是与vue结合，如果你需要单独编译.sass文件或者.scss文件，那么你需要安装Ruby， 同时可以让SASS监控某个样式表的变动，实现样式的热部署。