［前端］Bootstrap5 客製化 (#1) 引入專案
為甚麼寫這篇文章?
在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事，並且隨著對 Bootstrap 以及 Sass 了解的加深，發現客製化的幅度可以非常的大跟彈性，因此想記錄這些研究與實作的過程，如果對你也有幫助，那就太好了。
客製化 Bootstrap5 系列文章 :
#1 引入專案 (本篇)
前情提要 :
1 .此篇記錄的是以 npm 的方式引入 Bootstrap5 的過程、遇到的錯誤以及解決辦法
2.引入版本 v5.3.1
步驟一 : 在專案資料夾中新增 node_modules 資料夾
步驟二 : 使用 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 有做一些文件上的新增與屬性的轉移。
可以再對照官方文件 :
步驟七: 在 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>
網頁畫面 :
看到這畫面代表你成功將 Bootstrap 引入專案了!! ( 灑花~~~
恭喜你! 也感謝你看到這裡 🤗
參考文章 :
你可能也想看
