【sass】如何在vue項目中使用sass語法

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。在開發最初版本之後，Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass文件中使用的小型腳本語言。

使用sass可以使我們的樣式代碼變的更簡潔，更具有易讀性

首先，我們創建完vue項目之後
嘗試在項目中使用sass語法

運行後發現果不其然報錯了

在使用scss之前，我們首先需要安裝相關的插件

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

在這裏爲了安裝的速度更快，我使用了淘寶鏡像cnpm

在build目錄找到webpack.base.conf.js文件
在該文件module.export中的module.rules加入解釋scss文件的loader

{
   test: /\.scss$/,
   loader: 'sass-loader!style-loader!css-loader'
}

至此，運行項目
我們可以發現sass語法已經可以被編譯了