透過 VS Code 的 Live Sass Compiler 客製化 Bootstrap 的 CSS

我們在網站要客製化 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 的檔案，就可以拿來用了。