BS5 使用 SCSS 覆蓋新增Variable

安裝BS修改特定樣式<<<< 上篇文章說可以將全部的SCSS載入，但是這樣可能會太過大包，建議需要什麼載入甚麼比較好!

載入Bootstrap

使用終端機語法 npm i bootstrap 在專案內下載
會看到下面兩個檔案:

點進 node_modules 資料夾:

1. dist : 為輸出後版本，Complied CSS and JS。
2. SCSS : 透過SCSS客製化。

Bootstrap SCSS

先來看看Bootstrap 的 SCSS 都有些什麼吧!

1. bootstrap.scss
   包著所有的元件載入，包e_modules 含格線系統、按鈕、手風琴、表單等等。若是專案都需要用到，可以直接引入到專案中，雖然非常方便，但是缺點就是很大一包。
2. bootstrap-grid.scss
   如果只需要用到 Bootstrap 5 格線系統，在專案裡引入這個就可以了。
3. bootstrap-reboot.scss
   載入 reboot.scss 用來初始化 css 樣式，: 方便統一建立樣式。是基於 Normalize.css 上進行規劃的，可以單獨引入專案中。
4. bootstrap-utilites.scss
   Bootstrap 5 利用了scss的map-merge定義了很多通用類別，而且強化了他的功能，讓我們可以單獨只引入這包來進行使用，我們可以透過修改或覆蓋 utilities 來客製化與調整。

Bootstrap 官方文件說明

在結構上，我們要避免修改 Bootstrap 的核心文件。
保持 Bootstrap 的源文件與 專案的文件 分開 !!
通常會保持以下結構:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

在all.scss中，我們會使用import匯入需要的CSS。
Bootstrap匯入的方法有兩種:

1. 全部匯入

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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

1. 需要的匯入

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

// 1. 必要 Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. 自訂變數 Include any default variable overrides here
//同一 Sass 文件中的變數可以在預設變數之前或之後覆蓋。但是，當覆蓋橫跨 Sass 文件時，您必須在導入 Bootstrap 的 Sass 文件之前進行覆蓋。

// 3. 必要  Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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";

// 5. Add additional custom code here

使用SCSS變數新增修改

我們可以透過覆蓋或修改 _variable.scss 中的變數來實現客製化。
下圖是 bootstrap5 Variable.scss 檔案:

Default! ?

Default在SCSS中表示預設值。
若今天變數沒有另外指定的值，就會使用default。

$ dark: #333 !default;
p{
    color: $dark; //#333
}

若有另外指定值，就不會指定default。

$ dark: #888;
$ dark: #333 !default;
p{
    color: $dark; //#888
}

上圖中，可以看到裡面的變數幾乎都是Default，因此我們可以輕易地從外面進行修改。

修改

建議新的 _variable.scss 來覆蓋裏面的變數。
結構如下:

your-project/
├── scss/
|   └── all.scss //import匯入需要的
│   └── custom.scss 
|   └── variable.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

all.scss的匯入方式:

// Custom.scss
@import "custom";
@import "variable.scss"

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

同一 Sass 文件中的變數可以在預設變數之前或之後覆蓋。但是，當覆蓋橫跨 Sass 文件時，您必須在導入 Bootstrap 的 Sass 文件之前進行覆蓋。