只改--bs-primary不够，因Bootstrap 5.3+组件依赖--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle等整套变量协同生效，漏一即导致悬停、边框、文字强调色异常或回退默认值。
直接改 --bs-primary 能让按钮、表单焦点边框等组件立刻变色，但只改这一个变量，.btn-primary:hover 会回退默认蓝色，.card-title 文字可能发灰，.border-primary 边框仍为浅蓝——因为 Bootstrap 5 组件依赖一整套配套 CSS 变量协同工作，漏掉任意一个就断链。
为什么只改 --bs-primary 按钮悬停还是蓝色？
Bootstrap 5 的 .btn-primary:hover 实际用的是 rgba(var(--bs-primary-rgb), .1) 做背景，不是直接读 --bs-primary。同理：
-
.card-title用--bs-primary-text-emphasis控制文字深浅，不设它，标题在浅背景上可能看不清 -
.border-primary和分隔线依赖--bs-primary-border-subtle，不是简单“淡化--bs-primary” -
.bg-primary-subtle这类背景类根本不用 CSS 变量，它们是 Sass 编译时生成的固定色值，改变量无效
必须一次性定义的完整变量链
所有变量必须写在 :root 下，且顺序/格式严格：
:root {
--bs-primary: #4a6fa5;
--bs-primary-rgb: 74, 111, 165;
--bs-primary-text-emphasis: #2c3e50;
--bs-primary-bg-subtle: #e8f0ff;
--bs-primary-border-subtle: #b8d0ff;
}
-
--bs-primary-rgb必须是纯数字三元组（无括号、无空格、无单位），否则rgba()解析失败 - 变量名大小写敏感：
--bs-Primary-rgb或--bs-primaryrgb都不会被识别 - 如果项目支持深色模式，必须在
[data-bs-theme="dark"]下单独重写整套变量，CSS 变量不自动反转
哪些地方能用，哪些地方根本没用？
能响应的组件（5.3+ 原生适配）：
立即学习“前端免费学习笔记（深入）”；
-
.btn-primary、.alert-primary、.form-control:focus -
.tooltip（需同步设--bs-tooltip-bg、--bs-tooltip-color、--bs-tooltip-arrow-color） -
.link-primary、.nav-link（但普通<a>标签仍需额外声明）
完全不响应的：
-
.text-primary、.bg-primary—— 这些是编译时生成的 class，不读 CSS 变量 -
@media查询条件中不能用var(--bs-primary)，语法非法 -
::before/::after的content属性只能输出字符串，不能计算颜色 - 第三方组件（如 Bootstrap Icons、某些表单验证插件）完全不读这些变量
最容易被忽略的构建前提
自定义 CSS 变量必须加载在 Bootstrap 官方 CSS 之后，否则会被覆盖；但更关键的是：你改的变量如果没进构建流程，它就只是注释。比如：
- 用 CDN 或
<link href="dist/css/bootstrap.min.css">引入 Bootstrap → 所有变量修改都白写 - 在 JS 里用
document.documentElement.style.setProperty('--bs-primary', 'red')→ 只影响直接读取该变量的组件，大量状态色（悬停、焦点、边框）仍按旧值渲染 - 把变量塞进
node_modules/bootstrap/dist/css/bootstrap.css→ 下次yarn upgrade就丢，且破坏依赖不可变性
真正起效的路径只有一条：你的自定义 CSS 文件（含 :root 声明）必须作为独立样式表，在 Bootstrap CSS 后加载，且不能被任何构建工具误删或压缩掉变量声明。
