🔹 方法 1：用 CSS 覆蓋（最常用）

Bootstrap 本質上就是一堆 CSS，所以你只要在 自己的 CSS 檔案（要放在 Bootstrap 之後）加上覆蓋樣式就好。

例如，你想清除 .btn 的顏色：

CSS
.btn {
  all: unset;        /* 清掉所有 Bootstrap 預設 */
  font: inherit;     /* 恢復文字樣式 */
  cursor: pointer;   /* 保持游標樣式 */
}

all: unset 會把大部分樣式都重置，但保留 繼承性質（像字型）。

🔹 方法 2：只針對特定元件重置

如果不想全部清掉，可以只改某些屬性：

CSS
.accordion-button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

🔹 方法 3：使用 :where() 或更高優先度

Bootstrap 的選擇器權重蠻高，常常要用 !important。
更乾淨的方法是用更精準的選擇器：

CSS
.my-accordion .accordion-button {
  all: unset;
  font-size: 1rem;
  color: #333;
}

這樣就只影響 .my-accordion 內的 accordion，不會改壞全站。

🔹 方法 4：在 Vite / SCSS 裡只載入需要的部分

如果你覺得 Bootstrap 太「重」，可以在 SCSS 裡挑部分引入：

SCSS
// 在你的 style.scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
// 想要哪個元件就 import 哪個
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/forms";

✅ 總結：

• 要快速乾淨 → all: unset

• 只想去掉顏色或框線 → 覆蓋指定屬性

• 不想一直覆蓋 → SCSS 層級就挑需要的載