vue-cli@3添加sass（vue項目模板封裝系列）

前言

上一期分享瞭如何在vue-cli3的框架中，封裝mixins，module 。本期將分享如何在vue項目中添加sass。

GitHub項目地址：github.com/jiangjiahen…

關於sass

本文默認你對sass有必定的瞭解，而且閱讀過相關的官方文檔，所以本文就不在贅述關於sass的基礎知識。

sass官方文檔： 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>
複製代碼