Day11 | 客製 Bootstrap Sass 樣式

發表於 分類於
此篇文章會講到 Bootstrap 文件客製 Sass 中 optionA 與 optionB 差異

❒ 版本

Bootstrap v5.1

此文章使用 npm i [email protected] 方式載入 Bootstrap

❒ BS 文件客製 Sass 中 Option A 與 B 差異

文件 Option A 方式可直接載入完整的 bootstrap，Option B 可選取需要的元件及工具 .. 等進行匯入，但直接載入完整的 bootstrap 怕檔案太肥的話，可選擇使用 Option B 方式。

❒ 文件中 Option A 方法

範例 : Option A GitHub Demo ( Vue )

BS 文件 : Customize / Sass / Importting : Option A

於專案使用 npm 載入 BS 後，視需求選擇要「 客製 variables 」或「 客製 variables 與 utilities 」。

❶ Option A. @import 檔案｜客製 variables

步驟 :

  1. 從 node_modules 中複製一份 _variables 檔案到專案中 ( 下方第 2 支檔案 )，前面記得加上第一支 functions 檔案不然會出錯。

▷ Option A @import 檔案程式碼｜客製 variables

1
2
3
4
@import "../node_modules/bootstrap/scss/functions";
@import "./helpers/variables";

@import "../node_modules/bootstrap/scss/bootstrap";

❷ Option A. @import 檔案｜客製 variables 與 utilities

步驟 :

➀ 從 node_modules 中複製一份 _variables 檔案到專案中 ( 下方第 2 支檔案 )，前面記得加上第一支 functions 檔案不然會出錯。
② 客製 utilities ，與_variables 一樣於 node_modules 中複製一份 _utilities 到專案路徑中下。

  • 如同 variables 操作，把文件中 node_modules 路徑改成專案放置的路徑。

  • 客製 utilities 需匯入Utilities API。

    1
    @import "../node_modules/bootstrap/scss/utilities/api

  • utilities 相關設定可參考此筆記。

▷ Option A. @import 檔案程式碼｜客製 variables 與 utilities

1
2
3
4
5
6
7
8
9
@import "../node_modules/bootstrap/scss/functions";
@import "./helpers/variables";
@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/mixins';
@import "./helpers/utilities";

@import "../node_modules/bootstrap/scss/bootstrap";
// 客製utilities需匯入Utilities API
@import "../node_modules/bootstrap/scss/utilities/api";

❒ 文件中 Option B 方法

範例 :

Option B GitHub Demo ( Vue )

BS 文件 :

① Customize / Sass / Importting : Option B
② 優化 Optimize / Lean Sass imports

  • 第一點的 Option B 可搭配文件中 Lean Sass imports 使用，選取需要的檔案 @import。
  • 於專案使用 npm 載入 BS 後，視需求選擇要「 客製 variables 」或「 客製 variables 與 utilities 」。
  • Option B 可自行選取要用的 「 components、helpers、Utilities 」，但有些必要的檔案是必須 @import 的，如下：
    • 文件 優化 Optimize / Lean Sass imports 中「 Configuration 」內為必須 @import 的檔案，「 Layout & components、Helpers、Utilities 」為選用的項目。路徑記得要改到 node_modules 下。
    • ‼️ 注意：選用的項目 「 Layout & components 」 中建議保留「 root、reboot、type 」這三個檔案，它們為 BS 的預設值。

❶ Option B. @import 檔案｜客製 variables

步驟 :

從 node_modules 中複製一份 _variables 檔案到專案中 ( 下方第 2 支檔案 )，前面記得加上第一支 functions 檔案不然會出錯。

▷ Option B @import 檔案程式碼｜客製 variables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// #1. 必須 import 的檔案
@import "../node_modules/bootstrap/scss/functions";
@import "./helpers/variables";
@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/mixins';

@import "../node_modules/bootstrap/scss/utilities";

// #2. 必須 import 的檔案
// 這三支為 BS 的預設值，建議加入必匯入檔案
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";

// #3. 選取需要的檔案匯入
// 可參考 優化 Optimize/Lean Sass imports中的「Layout & components、Helpers、Utilities 
...

❷ Option B. @import 檔案｜客製 variables 與 utilities

步驟 :

① 從 node_modules 中複製一份 _variables 檔案到專案中 ( 下方第 2 支檔案 )，前面記得加上第一支 functions 檔案不然會出錯。
② 客製 utilities ，與_variables 一樣於 node_modules 中複製一份 _utilities 到專案路徑下。

  • 如同 variables 操作，把文件中 node_modules 路徑改成專案放置的路徑。

  • 加入 Utilities API。

    1
    @import "../node_modules/bootstrap/scss/utilities/api";

  • 客製 utilities 需匯入Utilities API。

    1
    @import "../node_modules/bootstrap/scss/utilities/api";

  • utilities 相關設定可參考明日文章。

▷ Option B @import 檔案程式碼｜客製 variables 與 utilities

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// #1. 必須 import 的檔案
@import "../node_modules/bootstrap/scss/functions";
@import "./helpers/variables";
@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/mixins';
@import "./helpers/utilities";

// @import "../node_modules/bootstrap/scss/utilities"; 如utilities有客製此可刪

// #2. 必須 import 的檔案
// 這三支為 BS 的預設值，建議加入必匯入檔案
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";

// #3. 選取需要的檔案匯入
// 可參考 優化 Optimize/Lean Sass imports中的「Layout & components、Helpers
@import "../node_modules/bootstrap/選取需要的檔案";

// #4. 客製utilities需匯入Utilities API
@import "../node_modules/bootstrap/scss/utilities/api";