前言
上一期分享了如何在vue-cli3的框架中，封裝mixins，module 。本期將分享如何在vue項目中添加sass。
GitHub項目地址：https://github.com/jiangjiaheng/web-template
關(guān)于sass
本文默認你對sass有一定的了解，并且閱讀過相關(guān)的官方文檔，因此本文就不在贅述關(guān)于sass的基礎(chǔ)知識。
sass官方文檔：https://www.sass.hk/
添加方式
1. 創(chuàng)建項目時選擇預(yù)處理器sass
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
移動上下鍵選擇Manually select features：手動選擇創(chuàng)建項目的特性。
顯示如下：
? 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預(yù)處理器。
完成后項目會幫我們安裝sass-loader node-sass。
2. 手動安裝sass-loader
如果在創(chuàng)建項目沒有選擇CSS預(yù)處理器，我們也可以手動安裝sass-loader node-sass來集成scss。
npm install -D sass-loader node-sass
使用
完成添加后，我們只需要在style指定lang為scss即可，無須多余操作：
<style lang="scss" scoped>
$color: red;
h1 {
color: $color;
}
</style>
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
