Bootstrap 客製 Sass 中 OptionA 與 B 使用方式

版本

Bootstrap v5.2

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

  • Option A 方式可直接載入完整的 bootstrap,Option B 可選取需要的元件及工具 .. 等進行匯入。
  • Option A 因是直接載入完整的 bootstrap,如果怕檔案太肥,可使用 Option B 。

Option A

範例 :
Option A GitHub Demo

所需文件 :
Customize / Sass / Importting : Option A

匯入 Sass 樣式 | 下方兩種方式擇一 :

  1. 客製 variables

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

      1
      2
      3
      @import "../node_modules/bootstrap/scss/functions";
      @import "./helpers/variables";
      @import "../node_modules/bootstrap/scss/bootstrap";
  2. 客製 variables 與 utilities

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

    • 客製 utilities ,與 _variables 一樣於 node_modules 中複製一份 _utilities 到專案路徑中下。

      • 如同 variables 操作,把文件中 node_modules 路徑改成專案放置的路徑。
      • 客製 utilities 需匯入 Utilities API。
      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 可自行選取要用的 「 components、helpers、Utilities 」,但有些必要的檔案是必須 import 的,請繼續往下看。
  • 文件 優化 Optimize / Lean Sass imports 中「Configuration 」內為必須 import 的檔案,「Layout & componentsHelpersUtilities 」為選用的項目。路徑記得要改到 node_modules 下。
    • ‼️ 注意:選用的項目 「Layout & components」 中建議保留「 rootreboottype 」這三個檔案,它們為 BS 的預設值。

範例 :
Option B GitHub Demo

所需文件 :

匯入 Sass 樣式 :

  • 客製 variables

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

      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
      ...
  • 客製 variables 與 utilities

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

    2. 客製 utilities ,與 _variables 一樣於 node_modules 中複製一份 _utilities 到專案路徑下。

      • 如同 variables 操作,把文件中 node_modules 路徑改成專案放置的路徑。
      • 客製 utilities 需匯入Utilities API。
      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";

較常用到的元件

  • 格線系統
    • @import "containers";@import "grid";
  • 表單
    • @import "tables";
  • 表格
    • @import "forms";
  • @import "helpers";@import "utilities/api";