# 使用 Webpack 使用 sass-loader 編譯 Bootstrap
###### tags: `webpack` `wordpress` `scss`
## 使用 Css 的預處理器 Sass 來加速我們的開發速度
### CSS 預處理器幫我們處理什麼事情？
我們的第一篇已經提及過 Webpack 可以使用 CSS 的預處理器來加速我們的開發速度，那具體而言 CSS 預處理怎麼幫助我們呢？這是由於 CSS 嚴格來說並不是程式語言，我們無法使用函式等等的方式操作設計，我們並不能簡化重複的程式碼，也無法使用邏輯運算子來判斷在不同的情況下的程式碼該如何回應，這就造成了編寫 CSS 的各種痛點，程式碼過於冗長，無法一次變更大量變動，而 CSS 預處理器就是來幫助我們處理這個問題。
### Sass 的基本用法
接下來我們介紹 Sass 這個 CSS 預處理器的基本用法，Sass 分成兩種撰寫風格 Sass 以及 Scss 由於 Scss 的撰寫風格與 CSS 較為接近，所以接下來我們都會以 Scss 來做為示範程式碼。

說到 Scss 最基本的概念就是他可以階層式的撰寫選擇器，在過去假設我們要用 CSS 撰寫一個列表我們可能會這樣寫

ul {
    display:flex;
    list-style:none;
}

ul li {
    margin-right:16px;
    font-size:24px;
}

ul li a {
    text-decoration: none;
    color:black;
}

而所謂的階層式撰寫就是我們可以這樣寫

ul {
    display:flex;
    list-style:none;
    li {
        margin-right:16px;
        font-size:24px;
        a {
            text-decoration: none;
            color:black;
        }
    }
}

上面的 SCSS 程式碼編譯出來之後就會跟 CSS 一樣，當然 SCSS 還有很多不同的功能，像是匯入、變數、迴圈、判斷式等等的功能，但由於本文章主要介紹的是 Webpack 的關係，所以日後有機會再介紹。

## 安裝 node-sass 以及 sass-loader 讓 Webpack 可以編譯 Scss 檔案
接下來我們開始介紹怎麼在 Webpack 裡面設定 Sass 預處理器，這個部分一開始跟 CSS 一樣我們需要一個 loader（ Sass-loader ） 去讓 Webpack 看得懂什麼是 Scss ，接下來我們再來安裝 Sass 讓 Sass-loader 可以把檔案交給 Sass 編譯，我們先在我們的專案資料夾下使用終端機輸入以下指令

npm install sass-loader node-sass -D

接下來我們就可以回到 webpack.config.js 裡面設定我們的 Sass

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader',
            ],
        },
    ],
},

可以看到跟 css-loader 那一篇不一樣的地方是我們在 test 的地方改成 `/\.scss$/` 這個這正規表達式，然後我們在 `css-loader` 的後面加上了 `sass-loader` 這個 loader，接下來我們我們的專案資料夾裡面新增一個 `all.scss` 的 Scss 檔案並在裡面隨意打入一段 Scss 的程式碼之後回到 `index.js` 這個我們主要的入口打入以下的程式碼

import './all.scss' // 用相對定位去找我們的檔案

接下來我們在終端機打入 `npm run build` ，應該就可以成功看到在 `dist` 資料夾裡面出現了 `main.css` 的檔案，裡面有編譯好的程式碼，這就代表我們的設定成功了，接下來我們就可以把 Bootstrap 載入到我們的專案中

## 安裝 Bootstrap 到 Webpack
這個時候回到我們的終端機打入下列的程式碼

npm install bootstrap@5.1 -D

這邊特別介紹一下這個 `@` ，在 npm 這個套件管理系統中預設安裝套件的時候會安裝最新的版本，但是如果我們在後面加上 `@` 的話就可以指定特定的版本號，筆者目前都是以 5.1 的版本為主，但基本上在 Webpack 的使用上沒有太大的差別。

接下來我們就剩下兩個步驟就可以把 bootstrap 安裝到我們的專案中，我們先回到 `index.js` 裡面把 bootstrap 的 JS 檔案給載入

import 'bootstrap';

然後再到 `all.scss` 裡面把 bootstrap 的 Scss 檔案匯入

@import "../node_modules/bootstrap/scss/bootstrap"; // 此為相對位置，要麻煩各位自行修改

最後我們在終端機輸入 `npm run build` 應該就會成功到看到 `main.css` 裡面有很多編譯好的 bootstrap 程式碼。

## 結語

這樣我們就將完整的 bootstrap 程式碼載入到我們的專案中了，但 bootstrap 的問題就是程式碼過於肥大，下一篇我們將介紹如何拆分 bootstrap 的程式碼。