一、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 是以嚴格的縮進式語法規(guī)則來書寫，不帶大括號({})和分號(;)，而 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運行時，出現(xiàn)報錯（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
