必须在 Bootstrap CSS 之后注入 :root 声明，否则会被预设变量覆盖；需确保加载顺序正确、变量名精确（如--bs-primary）、语法规范（冒号后空格、分号结尾）、不加!important，且RGB等链式变量须手动同步补全。
必须在 Bootstrap CSS 之后注入 :root 声明
直接写 :root { --bs-primary: red; } 无效，是因为 Bootstrap 编译后的 CSS 文件（如 bootstrap.min.css）已在 :root 中预设了所有 --bs-* 变量值。你的声明若出现在它之前，会被覆盖；若语法或拼写有误，浏览器会静默忽略整行。
正确做法是把自定义 :root 放在 <link rel="stylesheet" href="bootstrap.min.css"> 之后，且确保：
- 变量名一字不差：
--bs-primary不是--primary或--bs-color-primary - 冒号后有空格，分号结尾：
--bs-primary: #e63946;，不是--bs-primary:#e63946 - 不要加
!important—— CSS 变量不支持该声明，写了整行失效 - 避免用
<style>写在<body>底部，应放在<head>中靠后位置
局部覆盖要用容器选择器，别只靠 :root
全局改 :root 会影响所有组件，比如改了 --bs-primary，.btn-primary、.alert-primary、.border-primary 全跟着变——但你可能只想改某个表单里的按钮。
这时该用作用域选择器，例如：
立即学习“前端免费学习笔记（深入）”；
.my-checkout .btn-primary {
--bs-btn-primary-bg: #7e57c2;
--bs-btn-primary-border-color: #5e35b1;
--bs-btn-primary-hover-bg: #5e35b1;
}
注意：
-
.my-checkout必须是包裹整个区域的父容器 class，不能漏掉 - 按钮状态变量（
--bs-btn-primary-hover-bg、--bs-btn-primary-disabled-bg）必须一并设置，否则用户交互时颜色“闪回” -
.btn-outline-primary不读--bs-btn-primary-bg，它依赖--bs-btn-color、--bs-btn-border-color、--bs-btn-bg，三者得同步调 - 深色模式下不会自动适配，需额外加
@media (prefers-color-scheme: dark)块重写
RGB 版本变量要手动补全，不能指望自动转换
Bootstrap 的很多颜色变量（如 --bs-primary-rgb）是用于 rgba()、hsl() 等函数计算的，它们不是自动生成的——你改了 --bs-primary，--bs-primary-rgb 不会自动更新。
如果组件样式里用了 rgba(var(--bs-primary-rgb), 0.1) 这类写法（比如 .btn-primary:focus 的阴影），而你没同步改 --bs-primary-rgb，就会出现颜色错乱或半透明失效。
解决方法是显式补全：
:root {
--bs-primary: #e63946;
--bs-primary-rgb: 230, 57, 70;
}
常见需手动同步的 RGB 变量包括：
-
--bs-primary-rgb/--bs-secondary-rgb等主题色 -
--bs-body-color-rgb/--bs-body-bg-rgb --bs-border-color-rgb
漏掉任一，都可能让焦点环、禁用态、渐变背景等视觉异常。
变量覆盖 ≠ 组件样式全覆盖
不是所有 Bootstrap 组件都响应 CSS 变量。比如：
-
border-radius在 Bootstrap 5 中仍是 Sass 编译期硬编码值，--bs-border-radius并不存在，改变量完全无效 -
.popover和.dropdown-menu从 5.2+ 开始支持--bs-popover-bg、--bs-dropdown-bg，但旧版本或第三方扩展组件可能仍读 Sass 值 -
font-size类（如.fs-4）由 Sass 变量$font-size-base生成，不响应--bs-body-font-size
判断一个组件是否支持变量，最直接的方式是打开 DevTools → 查看 computed 样式 → 找 background-color 或 color 对应的来源：若显示 var(--bs-xxx)，说明走变量；若显示具体颜色值或 inherit，说明是硬编码规则。
真正难的是：你以为改了变量就万事大吉，结果发现某处 .card 圆角还是圆的、某处 .form-control 字体大小没变、某个弹窗背景色没响应——因为那些地方压根没接入变量体系。变量覆盖只是主题定制的第一层，不是万能开关。
