前言
上一期分享了如何在vue-cli3的框架中，封裝mixins，module 。本期將分享如何在vue項目中添加sass。
GitHub項目地址：https://github.com/jiangjiaheng/web-template
關于sass
本文默認你對sass有一定的了解，并且閱讀過相關的官方文檔，因此本文就不在贅述關于sass的基礎知識。
sass官方文檔：https://www.sass.hk/
添加方式
1. 創建項目時選擇預處理器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。
2. 手動安裝sass-loader
如果在創建項目沒有選擇CSS預處理器，我們也可以手動安裝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>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
