章節連結
Bootstrap 4 的前端框架，其樣式是可以透過 npm 之類的工具下載回自己的本地端，修改變數相關設定後再行輸出的。這篇要筆記下可以操作的地方，以及如何再度編譯出來。
步驟
1. npm install bootstrap，你就會發現多了一個 node_modules 資料夾
2. import 相關檔案
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// required 必須載入 @import "../node_modules/bootstrap/scss/functions"; // 將原先 node_modules 裡面的變數檔案 ../node_modules/bootstrap/scss/variables 複製一份出來 // 並用其來編譯 @import "variables" @import "../node_modules/bootstrap/scss/mixins"; // 舉例 以下的顏色變數都是 BS4 內建的，可以自行修改 $blue: #2196F3 !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #e83e8c !default; $red: #e51c23 !default; $orange: #fd7e14 !default; $yellow: #ff9800 !default; $green: #4CAF50 !default; $teal: #20c997 !default; // 各種主題對應的顏色，則在這邊控制 $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-800 !default; $cyan: #9C27B0 !default; |
3. 除了 scss/functions, variables, mixins 這三者為必定要載入的檔案外，其他的部份可以視情況載入，像是
|
1 2 3 4 5 6 7 |
載入客製化的變數內容和格線系統、按鈕 @import "../node_modules/bootstrap/scss/functions"; @import "variables"; @import "../node_modules/bootstrap/scss/mixins"; // Option @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/buttons"; |
