[前端]Bootstrap5 客製化 (#1) 引入專案

閱讀時間約 9 分鐘

為甚麼寫這篇文章?

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




客製化 Bootstrap5 系列文章 :

#1 引入專案 (本篇)

前情提要 :

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

2.引入版本 v5.3.1




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

raw-image


步驟二 : 使用 npm 下載

npm 官方文件

$ npm install bootstrap@v5.3.1

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

raw-image


步驟三 : 建立 all.scss

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

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

raw-image


步驟四 : 引入必要的 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

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

raw-image

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

// 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";

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

raw-image

另外查詢解法,這邊要在「步驟四 : 引入必要的 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>

網頁畫面 :

raw-image

看到這畫面代表你成功將 Bootstrap 引入專案了!! ( 灑花~~~

恭喜你! 也感謝你看到這裡 🤗



參考文章 :

手把手自訂你的 Bootstrap 樣式

第 13 集:Bootstrap 客製化 Sass 環境


2會員
21內容數
關於 Html 、 Css 、JS 等相關程式語言的學習筆記或開發紀錄
留言0
查看全部
發表第一個留言支持創作者!