只改--bs-primary不够，因bootstrap 5组件依赖--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle等配套变量计算透明背景、文字强调色和边框色，漏掉任一变量会导致悬停、焦点或边框颜色异常或回退默认值。
直接改 --bs-primary 等 CSS 变量就能快速生效，但必须作用在正确作用域、补全配套变量，否则按钮悬停、边框、文字强调色会错乱或回退默认值。
为什么只改 --bs-primary 不够？
Bootstrap 5 的组件不是直取 --bs-primary，而是依赖一整套衍生变量做计算：
-
--bs-primary-rgb：用于rgba(var(--bs-primary-rgb), .1)这类透明背景 -
--bs-primary-text-emphasis：控制深色文字（比如卡片标题），默认不随--bs-primary自动变 -
--bs-primary-border-subtle：用于边框和分隔线，也不是简单浅色化
漏掉任意一个，.btn-primary:hover、.form-control:focus、.card.border-primary 就可能显示异常颜色或干脆用回蓝色。
怎么安全地重设整套主色变量？
推荐在 :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漏掉-rgb后缀会导致透明背景失效 -
--bs-primary-rgb值必须是纯数字三元组（无括号、无单位），否则rgba()解析失败 - 如果项目用了深色模式，还需在
[data-bs-theme="dark"]下单独重写这套变量，CSS 变量不自动反转
哪些地方会受这些变量影响？
改完后以下全部自动更新，无需额外加类：
- 按钮：
.btn-primary、.btn-outline-primary（前提是同时设了--bs-btn-color和--bs-btn-border-color） - 表单控件：
.form-control:focus、.input-group-text - 徽章、进度条、警告框、列表项、卡片边框等所有带
primary后缀的工具类 - 链接：
.link-primary、.nav-link（但普通<a></a>标签仍需单独声明a:link）
真正容易被忽略的是：这些变量只影响 Bootstrap 自己生成的样式，不会穿透到第三方组件或手写 CSS 里——如果你在某个 Vue 组件里写了 .my-card { border-color: var(--bs-primary); }，它能生效；但若写了 .my-card { border-color: #0d6efd; }，就完全不受影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
