改--bs-primary需同步定义5个配套变量，否则组件回退默认值：--bs-primary、--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-bg-subtle、--bs-primary-border-subtle，且须声明在:root中、bootstrap css之后。
只改 --bs-primary 会失效——按钮悬停、边框、文字强调色全乱，因为 Bootstrap 5 组件依赖一整套配套变量协同计算，漏掉任一个就 fallback 到默认蓝色。
为什么改了 --bs-primary 按钮悬停还是蓝色？
Bootstrap 的 .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-rgb必须是纯数字三元组（如37, 99, 235），不能带括号、空格或单位，否则rgba()解析失败 -
--bs-primary-text-emphasis不是自动生成的，需手动设为满足 WCAG 对比度的值（比如主色是#2563eb，建议强调色为#1d4ed8） - 变量必须声明在
:root中，作用域不对（比如只写在.my-card里）会导致组件读不到
必须一次性定义的完整变量链
覆盖主色时，至少要同步设置这 5 个变量，缺一不可：
:root {
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
--bs-primary-text-emphasis: #1d4ed8;
--bs-primary-bg-subtle: #e0f2fe;
--bs-primary-border-subtle: #93c5fd;
}
- 顺序和命名必须严格匹配，
--bs-primary-rgb少个-rgb后缀，透明背景就失效 - 所有变量都得在 Bootstrap CSS 加载之后生效——推荐把这段
<style></style>放在<link rel="stylesheet" href="bootstrap.min.css">之后 - 如果项目支持深色模式，必须在
[data-bs-theme="dark"]下单独重写整套变量，CSS 变量不会自动反转
原生 a 标签为啥没变色？
--bs-link-color 只影响 Bootstrap 自己的链接类（如 .link-primary、.nav-link），对原生 <a></a> 完全无效。常见现象是导航栏链接变色了，正文里一堆“点这里”还是蓝色。
- 必须显式补充：
a:link, a:visited { color: var(--bs-link-color); } a:hover, a:focus { color: var(--bs-link-hover-color); } - 别漏掉
a:visited，否则用户点过一次就退回紫色 -
--bs-navbar-active-color是独立变量，控制.nav-link.active的高亮色，不等于--bs-link-color
第三方组件和手写 CSS 不会自动响应
这些 CSS 变量只影响 Bootstrap 自己生成的样式。如果你在 Vue 组件里写了 .my-card { border-color: var(--bs-primary); }，它能生效；但若写了 .my-card { border-color: #0d6efd; }，就完全不受影响。
- 真正容易被忽略的是：变量修改后，所有依赖它的工具类（
.text-primary、.bg-primary、.border-primary）会自动更新，但你自己写的硬编码颜色、第三方 UI 库（如 Bootstrap Icons）、或内联style属性都不会响应 - 想让自定义类也响应，就得主动用
var(--bs-primary)替换所有硬编码值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
