「Vue」vue-cli 3.0集成sass/scss到vue項目

vue-cli 3提供了兩種方式集成sass/scss：

建立項目是選擇預處理器sass
手動安裝sass-loader
建立項目選擇預處理器sass
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
移動上下鍵選擇「Manually select features」：表示手動選擇建立項目的特性。

顯示以下：

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
移動上下鍵在CSS Pre-processors，按提示點擊空格鍵選擇CSS-processors。

顯示以下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
LESS
Stylus
選擇第一個SCSS/SASS做爲咱們的CSS預處理器。

完成後項目會幫咱們安裝sass-loader node-sass。

手動安裝
若是在建立項目沒有選擇CSS 預處理器，咱們也能夠手動安裝sass-loader node-sass來集成scss。

npm install -D sass-loader node-sass
使用
至此咱們只須要在style指定lang爲scss便可：

<style lang="scss">
$color = red;
</style>
vue service clie會自動使用咱們安裝的sass-loader做爲scss內容的加載器。

vue cli是基於webpack構建項目，若是想對sass-loader傳遞一些配置項，能夠在vue.config.js配置。在項目的根目錄下若是沒有找到vue.config.js，手動建立便可。以下：

// vue.config.jsconst fs = require('fs')module.exports = { css: { loaderOptions: { sass: { data: fs.readFileSync('src/variables.scss', 'utf-8') } } }}這個文件variables.scss也是能夠經過import在.vue組件裏引入。