一、vue2.0项目中引入sass预编译
（1）安装依赖
vue项目中想要使用sass,需要安装上node-sass、sass-loader和style-loader等模块。
使用命令：npm i node-sass@4.14.1 sass-loader@7.3.1 style-loader -D
加上版本号是为了防止版本过高在后面运行时报错。我这边是后面换了版本号才不报错的。
（2）设置配置文件
在vue项目中build文件夹下的webpack.base.conf.js文件里的rules:下添加下面代码：
{
test: / \.scss$ /,
loaders: ['style', 'css', 'sass']
}
如图：
在webpack.base.conf.js中添加内容.jpg
（3）页面中引用
<style scoped lang="scss">
$color:red;
$k:100px;
.hello{
width:$k;
height:$k;
background: $color;
}
</style>
这上面指定的lang="scss"类型是.scss,而不是.sass,这两都之间有什么不同呢？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
二、vue2.0项目中引入less预编译
（1）安装依赖
使用命令：
npm install less less-loader --save-dev或
cnpm install less less-loader --save-dev
（2）设置配置文件
在vue项目中build文件夹下的webpack.base.conf.js文件里的rules:下添加下面代码：
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
如图：
在webpack.base.conf.js中添加内容.jpg
（3）页面中引用
<style scoped lang="less">
@color:red;
@k:100px;
.hello{
width:@k;
height:@k;
background: @color;
}
</style>
友情提示：当npm run dev运行时，出现报错（Module build failed: TypeError: this.getOptions is not a function），有可能是less-loader版本过高导致的，解决办法是先卸载之前的高版本，安装低版本，如下：
npm uni less less-loader
npm i less less-loader@4.1.0 --save-dev
