［前端］Bootstrap5 客製化 (#1) 引入專案

發佈於前端開發

2023/10/16閱讀時間約 9 分鐘

為甚麼寫這篇文章?

在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事，並且隨著對 Bootstrap 以及 Sass 了解的加深，發現客製化的幅度可以非常的大跟彈性，因此想記錄這些研究與實作的過程，如果對你也有幫助，那就太好了。

客製化 Bootstrap5 系列文章 :

#1 引入專案 (本篇)

前情提要 :

1 .此篇記錄的是以 npm 的方式引入 Bootstrap5 的過程、遇到的錯誤以及解決辦法

2.引入版本 v5.3.1

步驟一 : 在專案資料夾中新增 node_modules 資料夾

步驟二 : 使用 npm 下載

npm 官方文件

$ npm install bootstrap@v5.3.1

成功後就會在 node_modules 資料夾下面看到 bootstrap 的檔案，專案資料夾也會多了 "package-lock.json"、"package.json" 這兩個檔案 (如果是專案的第一個 npm install)。

步驟三 : 建立 all.scss

用於管理所有 scss 文件的入口，包含 Bootstrap 5 元件、變數覆蓋、utilities 甚至我們額外寫的 scss 檔。

我自己是習慣把這個 all.scss 放在 scss 資料夾裡面

步驟四 : 引入必要的 scss 檔案

在客製化 bootstrap 前，這三支檔案是必須引入的，需要載入他本身設定好的 functions、mixins、variables，以便元件的運用跟計算。

引入順序很重要，function 一定要在 variables 前面，因為 variables 裡面有用到 function 的方法。

// customize.scss
// 引入 bootstrap 預設的 variables、functions、 mixins
// 我們同時可以運用裡面的 function、mixins 來精簡我們的 scss 內容，color, svg, media-breakpoint-up 等
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

步驟五 : 將 SCSS 編譯成 CSS

$ sass  --watch ./scss/all.scss ./templates/all.css

終端機的截圖畫面與編譯成功訊息 :

步驟六 : 依照專案需求將元件或格線系統引入:

// Optional
// Layout & components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";

我在這步驟，終端機跳出錯誤訊息 :

另外查詢解法，這邊要在「步驟四 : 引入必要的 scss 檔案」時，必須再加上 "_variables-dark.scss" “_maps.scss” 這兩個檔案 (第 3 行與第 4 行) (需注意位置順序)，就可以排除錯誤。如下圖 :

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";

教學文 :Missing $primary-text-emphasis-dark variable #38683
教學文 :Webpack build fails with “SassError: Undefined variable” when updating 5.1.3 -> 5.2.0 #36785
教學文 : Undefined variable $theme-colors-rgb in Bootstrap root.scss

簡單來說，出錯原因是因為我參考的教學文件中筆者所引入的 Bootstrap 版本比較舊，而我引入的 Bootstrap 版本是 v5.3.1，在版本更新之間 Bootstrap 有做一些文件上的新增與屬性的轉移。

可以再對照官方文件 :

自訂義 Sass
Migrating to v5

步驟七: 在 html 的 <head> 裡面加入 css 檔案路徑

<link rel="stylesheet" href="templates/all.css">

步驟八: 複製 Bootstrap 片段程式碼測試是否有成功引入

(這邊以按鈕元件示範)

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>