[Boostrap] 透過scss自訂個人風格的主題(Theme)

Bootstrap將常用的Navbar、Button等元件定義好css
可以讓前端的開發更加快速，是最多人使用的前端開發套件！

但有時boostrap的設定不合意要怎麼辦呢？
而且這麼多人使用bootstrap是不是有失個人風格呢？
這時你可以下載scss的版本來定義屬於自己的bootstrap模板喔！

請新建一個檔案加入bootstrap，第一種方法是把所有的元件都引用：

// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

或者有時你只需要使用bootstrap部分的元件

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

以上二選一即可，另外還提供了bootstrap-grid、bootstrap-reboot兩種常用的部分元件集，像bootstrap-grid就是針對網頁排版的所有bootstrap元件集，在RWD的網站時非常便利。

接著，進入正題！例如btn-primary、text-primary等都是藍色(#007bff)，如果要自訂為粉紅色(#e83e8c)，請將重新定義的顏色寫在引用bootstrap之前，檔案內容如下：

// Custom.scss
$primary: #e83e8c;

@import "node_modules/bootstrap/scss/bootstrap";

所有的primary就會變成你定義的粉紅色(#e83e8c)，基本上所有的參數都能在_variables.scss找到原始的設定，只要加上你需要修改的參數，就可以輕鬆打造屬於你的bootstrap主題囉！

參考資料：
https://getbootstrap.com/docs/4.0/getting-started/theming/