CH12-03 | Bootstrap 與 Sass -03

選擇性載入 Bootstrap 與修改變數

CH12 117

課程練習下載

Bootstrap 路徑 : Getting started / Theming

File structure

Theming Bootstrap 操作步驟

  • 第一次使用 npm 載入 BS 會得到下方結構
    • 你的專案內會有個 SCSS 裡面有個自己命名的 .scss 檔案
    • node_modules/ 內的 scss 直接透過 include path 載入近來
your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Import

兩種載入方式 : ❶ 完整的載入 BS ❷ 客製化的方式

❶ 完整的載入 BS

  • 刪除之前已架好的課程練習中 source / stylesheets 資料夾,再新建一個新的 stylesheets 資料夾 → stylesheets 資料夾內新增 all.scss 檔案

Bootstrap-Theming方法1_01

  • 開啟 index.html 可看見已經對應好 all.css

Bootstrap-Theming方法1_02

  • 重新啟動 gulp : Ctrl +` → gulp ,可見頁面排版跑掉了,因為沒有載入任何的 CSS
  • 開啟資料夾 public / stylesheets : all.scss 裡面是空的,把 import 提供的方法1 程式碼 @import "../node_modules/bootstrap/scss/bootstrap"; 貼入 source / stylesheets / all.scss 內
    • 注意 : 原始檔案都在 source 資料夾內,盡可能不要在 public 資料夾內做調整
  • 把 @import 中 node_modules/bootstrap/scss/ 拿掉 @import "bootstrap"; ,因為前面已經使用 include path 將整個 BS 載入了,存檔後到 public / stylesheets : all.css 就可看到編譯後的檔案,回到網頁原本跑掉的排版就可正常顯示。

『註』includePaths 是 Sass 的功能,他可以載入其他路徑的 .sass 作為擴充載入 。 資料來源

客製化的方式

  • 刪除之前已架好的課程練習中 source / stylesheets 資料夾,再新建一個新的 stylesheets 資料夾 → stylesheets 資料夾內新增 all.scss 檔案 ( 到 index.html 查看是否有對應 all.css 檔案 )
  • 於 source / stylesheets 新建一個 helpers 資料夾
  • 開啟 node_modules/bootstrap : _variables.scss 另存新檔到 source /stylesheets / helpers ,不改檔名直接存檔即可。
  • 之後編譯就直接使用 source 下的 _variables.scss 而非 node_modules 下的 _variables.scss,這樣才能自訂我們要的變數。

自訂元件

  • 先複製 BS /import 方法2 中 必備的 @import 貼入路徑 source / all.scss ,@import 前方 node_modules/bootstrap/scss/ 可拿掉,@import "variables" 加入helpers 路徑 → @import "helpers/variables";
    • // required 為必備加入的
    • // option 為自訂 但只有顯示局部。
  • 試著把 // option : VSCose 終端機 npm install 載入的 node_modules 資料夾 / bootstrap : bootstrap.scss 中 @ "root" 到 @import "button" 載入到 source / all.scss 看看,這時網頁有些元件和排版就可顯示出來。由此可知我們可依自己需求載入需要用到的元件到檔案內,這樣檔案量也會比較小。像大部分使用 Bootstrap 只使用到 grid 部分,那就只需 @import "grid"; 即可
// Required 官方板
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Required 客製後正確版
@import "functions";
@import "helpers/variables";
@import "mixins";
  • 試著修改主題色 : 開啟 source / stylesheets : _variables.scss 到 $theme-colors 內更改主題顏色即可。
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "hex":        #00cc99,
  ),
  $theme-colors
);

『註』 如果新增新檔案建議在終端機重啟 gulp,穩定度會比較高。


資料來源

最後修改日期: 1 6 月, 2020

作者