重點整理
Sass（SCSS）可用巢狀選擇器、變數等寫法簡化 CSS；在 Webpack 加上 sass-loader 後就能自動編譯。本文說明 SCSS 基本寫法、webpack.config.js 設定，以及安裝 Bootstrap 並以 SCSS 引入的方法。
使用 Css 的預處理器 Sass 來加速我們的開發速度
CSS 預處理器幫我們處理什麼事情？
我們的第一篇已經提及過 Webpack 可以使用 CSS 的預處理器來加速我們的開發速度，那具體而言 CSS 預處理怎麼幫助我們呢？這是由於 CSS 嚴格來說並不是程式語言，我們無法使用函式等等的方式操作設計，我們並不能簡化重複的程式碼，也無法使用邏輯運算子來判斷在不同的情況下的程式碼該如何回應，這就造成了編寫 CSS 的各種痛點，程式碼過於冗長，無法一次變更大量變動，而 CSS 預處理器就是來幫助我們處理這個問題。
Sass 的基本用法
接下來我們介紹 Sass 這個 CSS 預處理器的基本用法，Sass 分成兩種撰寫風格 Sass 以及 Scss 由於 Scss 的撰寫風格與 CSS 較為接近，所以接下來我們都會以 Scss 來做為示範程式碼。
說到 Scss 最基本的概念就是他可以階層式的撰寫選擇器，在過去假設我們要用 CSS 撰寫一個列表我們可能會這樣寫
而所謂的階層式撰寫就是我們可以這樣寫
上面的 SCSS 程式碼編譯出來之後就會跟 CSS 一樣，當然 SCSS 還有很多不同的功能，像是匯入、變數、迴圈、判斷式等等的功能，但由於本文章主要介紹的是 Webpack 的關係，所以日後有機會再介紹。
安裝 node-sass 以及 sass-loader 讓 Webpack 可以編譯 Scss 檔案
接下來我們開始介紹怎麼在 Webpack 裡面設定 Sass 預處理器，這個部分一開始跟 CSS 一樣我們需要一個 loader（ Sass-loader ） 去讓 Webpack 看得懂什麼是 Scss ，接下來我們再來安裝 Sass 讓 Sass-loader 可以把檔案交給 Sass 編譯，我們先在我們的專案資料夾下使用終端機輸入以下指令
接下來我們就可以回到 webpack.config.js 裡面設定我們的 Sass
可以看到跟 css-loader 那一篇不一樣的地方是我們在 test 的地方改成 /\.scss$/ 這個這正規表達式，然後我們在 css-loader 的後面加上了 sass-loader 這個 loader，接下來我們我們的專案資料夾裡面新增一個 all.scss 的 Scss 檔案並在裡面隨意打入一段 Scss 的程式碼之後回到 index.js 這個我們主要的入口打入以下的程式碼
接下來我們在終端機打入 npm run build ，應該就可以成功看到在 dist 資料夾裡面出現了 main.css 的檔案，裡面有編譯好的程式碼，這就代表我們的設定成功了，接下來我們就可以把 Bootstrap 載入到我們的專案中
安裝 Bootstrap 到 Webpack
這個時候回到我們的終端機打入下列的程式碼
這邊特別介紹一下這個 @ ，在 npm 這個套件管理系統中預設安裝套件的時候會安裝最新的版本，但是如果我們在後面加上 @ 的話就可以指定特定的版本號，筆者目前都是以 5.1 的版本為主，但基本上在 Webpack 的使用上沒有太大的差別。
接下來我們就剩下兩個步驟就可以把 bootstrap 安裝到我們的專案中，我們先回到 index.js 裡面把 bootstrap 的 JS 檔案給載入
然後再到 all.scss 裡面把 bootstrap 的 Scss 檔案匯入
最後我們在終端機輸入 npm run build 應該就會成功到看到 main.css 裡面有很多編譯好的 bootstrap 程式碼。
常見問題
node-sass 還能用嗎？
不建議再使用。npm 上的 node-sass 已標示停止維護，官方建議改用 sass（Dart Sass）或 sass-embedded。本文的 sass-loader 設定觀念仍然適用，只要安裝時把 node-sass 換成 sass，sass-loader 會自動使用它編譯。
sass-loader 在 webpack.config.js 要怎麼設定？
在 module.rules 加一條規則，test 設為 /\.scss$/，use 依序寫 style-loader、css-loader、sass-loader。loader 由後往前執行，sass-loader 先把 SCSS 編成 CSS，再交給 css-loader。
Bootstrap 一定要整包載入嗎？
不一定。用 SCSS 引入 Bootstrap 的好處，就是可以只匯入需要的元件檔，並在匯入前修改變數，例如主色、圓角與斷點，編譯出來的 CSS 會比整包載入小，也比事後覆寫樣式更好維護。
結語
這樣我們就將完整的 bootstrap 程式碼載入到我們的專案中了，但 bootstrap 的問題就是程式碼過於肥大，下一篇我們將介紹如何拆分 bootstrap 的程式碼。