直接改$blue、$red变量无效，因其仅在Sass编译阶段生效；须在@import Bootstrap前重定义变量，或通过map-merge扩展$theme-colors，并手动配置对比度变量以确保outline类正确渲染。
直接改 $blue $red 变量没用，除非你重编译 Sass
Bootstrap 5 的 $blue、$red 等基础色变量只在 Sass 编译阶段起作用，不是运行时可修改的配置项。如果你只是在 CSS 文件里写 $blue: #1e40af;，浏览器完全不认识——它根本不是 CSS 语法。真正生效的前提是：你用的是 .scss 源文件，且在 @import "bootstrap/scss/bootstrap" **之前** 重定义这些变量。
常见错误包括：
- 把变量写在 HTML 的
<style></style>标签里 - 在已编译好的
bootstrap.min.css后面追加:root { --bs-blue: ... }—— 这改的是 CSS 变量，和$blue无关 - 复制了整个
variables.scss到项目里，但没控制好@import顺序，导致你的定义被 Bootstrap 原值覆盖
$theme-colors 才是扩展自定义色的正路，别动 $blue
Bootstrap 官方不鼓励直接覆盖 $blue、$red 这类底层基础变量，因为它们被大量内部逻辑（比如对比度计算、渐变生成）硬依赖，一改容易引发 .btn-outline-* 边框发灰、.text-* 文字不可读等问题。你应该做的是扩展 $theme-colors map：
- 必须用
map-merge()增量添加，不是全量覆盖：$theme-colors: map-merge($theme-colors, ("indigo": #4b0082)); - 键名必须带引号：
"indigo"✅，indigo❌（Sass 会报错） - 值支持十六进制、
rgb()、color-mix()，但避免用未声明的命名色（如rebeccapurple在旧版 Safari 不认） - 扩展后自动获得
bg-indigo、text-indigo、border-indigo等全套工具类
想改按钮/链接等组件颜色？优先用 CSS 变量 --bs-btn-primary-bg 或 --bs-link-color
如果你没走 Sass 编译流程（比如用 CDN 引入现成 CSS），或者只想局部微调，CSS 变量是唯一可行路径。Bootstrap 5.2+ 组件大多已接入这套机制：
- 全局改按钮主色：
:root { --bs-btn-primary-bg: #6a5acd; --bs-btn-primary-border-color: #5a4ac5; } - 只改某个按钮：
.my-purple-btn { --bs-btn-bg: #8a2be2; }+class="btn my-purple-btn" - 链接统一换色：
:root { --bs-link-color: #2563eb; }，但注意原生a:visited仍需单独设，否则点过变紫 - 变量名必须精确匹配（查官方文档或 DevTools 的
:root面板），拼错如--bs-btn-prime-bg就无效
btn-outline-* 边框还是灰色？你漏了对比度变量
即使你新增了 "amber": #ffc107 到 $theme-colors，.btn-outline-amber 的边框仍可能是灰色——这不是 bug，是设计行为。Bootstrap 用两个硬编码阈值变量决定轮廓类的边框/文字色：
-
$theme-color-contrast-light（默认#000）用于浅色背景上的深色文字/边框 -
$theme-color-contrast-dark（默认#fff）用于深色背景上的浅色文字/边框 - 它们不会随你新加的颜色自动适配；必须手动重定义，例如：
$theme-color-contrast-dark: #1e293b; - 否则
.btn-outline-amber会 fallback 到灰色边框（rgba(0,0,0,.15)）
这一步最容易被跳过，结果就是“颜色加了，但 outline 按钮看起来还是默认样”。
