透過 parcel 使用並修改 bootstrap 的 css

我們可以透過 scss 來幫助我們修改 bootstrap 的一些設定值，這邊就說明一下使用 parcel.js 來建構的方法。

在開啟專案後輸入這段安裝 bootstrap

npm install bootstrap@next

之後建立 scss/style.scss 的檔案，並在裡面 import scss 就好了。

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

只是這樣就沒辦法修改一些預設的變數，所以我們可以像這樣把東西陸續讀進來。

// 1.首先讀入 function
@import "../node_modules/bootstrap/scss/functions";

// 2. 把你要修改的變數寫在這邊
$primary: brown;
$danger: #ff4136;
$theme-colors: (
  "primary": $primary,
  "danger": $danger
);


// 3. 讀入剩餘與必須的 bootstrap 變數
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. 讀入你要的 bootstrap component 或元件
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";

//5. 你的 css 從這邊開始寫

接下來就可以測看看你寫的有沒有照修改後的樣式了，而在 bootstrap 的文件裡也有提到每塊該如何修改樣式，如果有需要可以參考那些文件來修改。