❒ 版本

Bootstrap v5.1

此文章使用 npm i bootstrap@5.2.1 方式載入 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

  @import "../node_modules/bootstrap/scss/functions";
  @import "./helpers/variables";
  
  @import "../node_modules/bootstrap/scss/bootstrap";
  

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

步驟 :

1. 從 node_modules 中複製一份 _variables 檔案到專案中 ( 下方第 2 支檔案 )，前面記得加上第一支 functions 檔案不然會出錯。
2. 客製 utilities ，與 _variables 一樣於 node_modules 中複製一份 _utilities 到專案路徑中下。
   • 如同 variables 操作，把文件中 node_modules 路徑改成專案放置的路徑。
   • 客製 utilities 需匯入Utilities API → @import "../node_modules/bootstrap/scss/utilities/api";
   • utilities 相關設定可參考此筆記。

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

  @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 文件 :

1. Customize / Sass / Importting : Option B
2. 優化 Optimize / Lean Sass imports
   1. 第一點的 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. 必須 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

步驟 :

1. 從 node_modules 中複製一份 _variables 檔案到專案中 ( 下方第 2 支檔案 )，前面記得加上第一支 functions 檔案不然會出錯。
2. 客製 utilities ，與 _variables 一樣於 node_modules 中複製一份 _utilities 到專案路徑下。
   • 如同 variables 操作，把文件中 node_modules 路徑改成專案放置的路徑。
   • 加入 Utilities API → @import "../node_modules/bootstrap/scss/utilities/api";
   • 客製 utilities 需匯入Utilities API ( @import "../node_modules/bootstrap/scss/utilities/api"; )
   • utilities 相關設定可參考明日文章。

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

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