我們在網站要客製化 Bootstrap 的 CSS 其實最好是去修改 SCSS 會比較好,如果網站本身沒有編譯 SCSS 的環境,建議可以透過之前介紹的 VS Code 套件 Live Sass Compiler 來編譯,首先安裝完後,再去 Bootstrap 官網下載原始碼。

接著參考之前用 parcel 那篇,我們建立一個檔案命名為 style.scss,並在裡面寫入這段 scss/sass:

@import "bootstrap";

@import "functions";
@import "variables";
@import "mixins";

@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "buttons";
...

這裡的 import 就看你想要讀入多少 bootstrap 的組件,之後主要我們要改的大概就不外乎顏色那些的,你只要打開 _variables.scss 這隻檔案,接著找到你要改的部分替換變數就好了。

像是我這邊只要把 blue 顏色改掉,網站的 primary color 就會更動了:

$blue:    #355C7D !default;

改完後等 Live Sass Compiler 產出 style.css 的檔案,就可以拿來用了。