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

YJ-avatar-img
YJ
發佈於前端開發
更新於 發佈於 閱讀時間約 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 環境


YJ 的沙龍前端開發
avatar-img
YJ 的沙龍
3會員
21內容數
一位會切版的 UI 設計師， 以介面設計為錨，朝向 UX 、產品思維、數據思維前進。 喜歡透過書探索世界、看見自己。 著迷文字與內心產生共鳴的瞬間， 喜愛哲學、小說、心理、創造力， 喜愛將所思所想落地變成文字。
留言0
查看全部
avatar-img
發表第一個留言支持創作者！
YJ 的沙龍 的其他內容
［前端］終端機指令紀錄_使用 npm 將 Bootstrap5 與 Sass 引入專案
這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。
#bootstrap5#SCSS#FrontendEngineering
［前端］Bootstrap5 網格系統 (Grid system)
為甚麼寫這邊文章? 這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。
#前端#切版#CSS
［前端］不是學了 Html+Css 就是會切版 !? 那些成為專業級你必須知道的事
在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。 文章節錄當時的檢核點，作為日後開發的 check list。
#六角學院#frontend#切版
［前端］終端機指令紀錄_使用 npm 將 Bootstrap5 與 Sass 引入專案
這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。
#bootstrap5#SCSS#FrontendEngineering
［前端］Bootstrap5 網格系統 (Grid system)
為甚麼寫這邊文章? 這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。
#前端#切版#CSS
［前端］不是學了 Html+Css 就是會切版 !? 那些成為專業級你必須知道的事
在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。 文章節錄當時的檢核點，作為日後開發的 check list。
#六角學院#frontend#切版
你可能也想看
Google News 追蹤
avatar-avatar
MIA mur mur 討論區
Thumbnail
國泰世華CUBE App 美的生活體驗，給予你最好的情緒。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
#國泰世華#CUBE卡#金融
avatar-avatar
筱涵｜Hannah的沙龍
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？ 跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
金融工程師的筆記
Thumbnail
安裝與引入 Bootstrap 5
Bootstrap 提供多種安裝方式以滿足不同開發環境的需求。以下將逐步介紹使用 CDN、npm/yarn 和本地安裝的方式，並說明如何引入 Bootstrap。 1. 使用 CDN 快速開始 CDN (Content Delivery Network) 是最快速的方式，無需下載檔案，直接透過
#bootstrap5#HTML#網頁設計
avatar-avatar
Joker Cat
Thumbnail
React - 資料驅動建立版型
此筆記僅以個人理解方式記錄 環境準備 我們這邊以 Bootstrap 5 的卡片元件來展示，要準備的有： Bootstrap 5 CDN Card(卡片) template React CDN React React 起手式，引用 CDN、綁定 root、指定渲染 dom。 <
#React#學習#六角學院
avatar-avatar
奧莉薇走在成為後端工程師之路上
Thumbnail
後端框架與API 開發(2-1) – 靜態資源下載 Bootstrap
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點： 客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化：如果你的網站只使用 Boot
avatar-avatar
奧莉薇走在成為後端工程師之路上
後端框架與API 開發(1-1)
※ 補充說明： ※ npm 常用指令： ◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱：用來安裝
avatar-avatar
Michael楊
Thumbnail
Javascript入門-Day10：套件
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
#Javascript
avatar-avatar
Joker Cat
Thumbnail
NPM 是甚麼？
NPM 全稱為 ( Node Package Manager )，直接翻譯就是 "node套件管理器" ，是 Node.js 預設的，當下載 Node.js 時也會一並下載到本機端並安裝，而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境，可謂是前端開發的好朋友。
#NPM#JokerCat#六角學院
avatar-avatar
Err500
Thumbnail
【Java】SpringBoot 專案初始建置
學習Spring Boot是Java工程師必備技能，文章分享瞭如何自學並快速上手Spring Boot開發，包括架構、開發工具、專案建立以及實作過程。
#程式#學習#Java
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Thumbnail
npm | Node.js
npm（全名 Node Package Manager，node套件管理器）
#程式#程式筆記#前端
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#36
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！ 很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！ 回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
#分享#挑戰#基礎
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#173
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！ 很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！ 回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
#分享#文章#工程師
avatar-avatar
MIA mur mur 討論區
Thumbnail
國泰世華CUBE App 美的生活體驗，給予你最好的情緒。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
#國泰世華#CUBE卡#金融
avatar-avatar
筱涵｜Hannah的沙龍
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？ 跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
金融工程師的筆記
Thumbnail
安裝與引入 Bootstrap 5
Bootstrap 提供多種安裝方式以滿足不同開發環境的需求。以下將逐步介紹使用 CDN、npm/yarn 和本地安裝的方式，並說明如何引入 Bootstrap。 1. 使用 CDN 快速開始 CDN (Content Delivery Network) 是最快速的方式，無需下載檔案，直接透過
#bootstrap5#HTML#網頁設計
avatar-avatar
Joker Cat
Thumbnail
React - 資料驅動建立版型
此筆記僅以個人理解方式記錄 環境準備 我們這邊以 Bootstrap 5 的卡片元件來展示，要準備的有： Bootstrap 5 CDN Card(卡片) template React CDN React React 起手式，引用 CDN、綁定 root、指定渲染 dom。 <
#React#學習#六角學院
avatar-avatar
奧莉薇走在成為後端工程師之路上
Thumbnail
後端框架與API 開發(2-1) – 靜態資源下載 Bootstrap
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點： 客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化：如果你的網站只使用 Boot
avatar-avatar
奧莉薇走在成為後端工程師之路上
後端框架與API 開發(1-1)
※ 補充說明： ※ npm 常用指令： ◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱：用來安裝
avatar-avatar
Michael楊
Thumbnail
Javascript入門-Day10：套件
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
#Javascript
avatar-avatar
Joker Cat
Thumbnail
NPM 是甚麼？
NPM 全稱為 ( Node Package Manager )，直接翻譯就是 "node套件管理器" ，是 Node.js 預設的，當下載 Node.js 時也會一並下載到本機端並安裝，而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境，可謂是前端開發的好朋友。
#NPM#JokerCat#六角學院
avatar-avatar
Err500
Thumbnail
【Java】SpringBoot 專案初始建置
學習Spring Boot是Java工程師必備技能，文章分享瞭如何自學並快速上手Spring Boot開發，包括架構、開發工具、專案建立以及實作過程。
#程式#學習#Java
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Thumbnail
npm | Node.js
npm（全名 Node Package Manager，node套件管理器）
#程式#程式筆記#前端
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#36
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！ 很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！ 回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
#分享#挑戰#基礎
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#173
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！ 很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！ 回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
#分享#文章#工程師