內容目錄
使用 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 程式碼。
結語
這樣我們就將完整的 bootstrap 程式碼載入到我們的專案中了，但 bootstrap 的問題就是程式碼過於肥大，下一篇我們將介紹如何拆分 bootstrap 的程式碼。
架站資源相關文章：
使用 Webpack 管理和打包 WordPress 前端資源， 提升你工作效率的好工具
利用 loader 完善 Webpack 編譯 CSS
24hr英語家教？用 Voice Control for ChatGPT 免費學英文好簡單！
Floating for YouTube 免費Chrome擴充功能，讓你邊用電腦邊看 Youtube！
UI Buttons 免費網頁動態按鈕素材，輕鬆踏入網頁設計CSS 的世界！
網站資訊文章推薦
什麼是服務設計？了解服務設計帶你一同攻略顧客的小心計
行銷5.0！來看知名電商Amazon如何利用新行銷4P實現預測行銷！
行銷5.0！來看資料行銷的數據整理術，讓你的資料淺顯易懂!
ChatGPT你不能不知道的隱藏秘笈：快速掌握AI對話技巧
scss Webpack WordPress
