只改 --bs-primary 不够，因为 bootstrap 5 依赖 --bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle 等整套变量协同计算透明背景、文字强调色和边框色，缺一即导致悬停、焦点、警告框等样式异常。
直接在 :root 里覆盖 --bs-primary 等变量就能生效，但必须确保它在 bootstrap.min.css 之后加载，且配套的 --bs-primary-rgb、--bs-primary-text-emphasis 等一个都不能漏，否则按钮悬停、边框、文字强调色会回退默认值或显示异常。
为什么只改 --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专用于边框和分隔线，不是简单浅色化，漏掉会导致.card.border-primary边框颜色错乱
常见错误现象：.btn-primary:hover 仍是蓝色、.form-control:focus 边框没变、.alert-primary 文字发灰看不清——基本都是变量链断了。
怎么安全地一次性重设整套主色变量？
推荐在 HTML 的 <style></style> 标签或独立 CSS 文件中，于 Bootstrap CSS 加载后写入完整 :root 块：
:root {
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
--bs-primary-text-emphasis: #1d4ed8;
--bs-primary-bg-subtle: #e0f2fe;
--bs-primary-border-subtle: #bae6fd;
}
注意三点：
- 变量名必须严格匹配，
--bs-primary-rgb漏掉-rgb后缀，透明背景直接失效 -
--bs-primary-rgb值必须是纯数字三元组（如37, 99, 235），不能带括号、单位或空格，否则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:link）
真正容易被忽略的是：这些变量只影响 Bootstrap 自己生成的样式，不会穿透到第三方组件或手写 CSS 里——如果你在某个 Vue 组件里写了 .my-card { border-color: var(--bs-primary); }，它能生效；但若写了 .my-card { border-color: #0d6efd; }，就完全不受影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
