直接改 .btn-primary 无效，因 bootstrap 5.2+ 依赖 css 变量（如 --bs-btn-primary-bg）动态计算样式；应通过 :root 或局部容器重设变量，并同步更新衍生变量（如 --bs-primary-rgb、--bs-primary-text-emphasis）以确保全组件、多状态、深色模式下一致可访问。
直接改 .btn-primary 为什么无效？
因为 Bootstrap 5.2+ 完全用 CSS 变量驱动按钮样式，.btn-primary 本身不带 background-color 值，它依赖 --bs-btn-primary-bg 等变量动态计算。你写 .btn-primary { background-color: #ff6b6b; }，等于在变量层之下硬塞一层——被变量覆盖、被 !important 压制、还漏掉 :hover 和 :disabled 状态，三重失效。
用 :root 重设 CSS 变量才是正解
一行变量生效，所有状态自动联动，不用写一堆选择器。但必须确保你的 <style></style> 或 CSS 文件在 Bootstrap 的 CSS 之后加载（检查 Network 面板确认顺序）。
-
--bs-primary控制主色，影响.btn-primary、.text-primary、.border-primary等全部工具类 - 要改按钮细节，得同步设：
--bs-btn-primary-bg、--bs-btn-primary-border-color、--bs-btn-primary-hover-bg、--bs-btn-primary-disabled-bg -
--bs-btn-outline-primary-color和--bs-btn-outline-primary-border-color是轮廓按钮专用，不能复用--bs-primary - 深色模式下需额外加
@media (prefers-color-scheme: dark)块重写一遍变量
局部覆盖比全局更安全
不想污染整个页面？给容器加个 class，把变量作用域缩进去：
.my-dashboard .btn-primary {
--bs-btn-primary-bg: #7e57c2;
--bs-btn-primary-border-color: #5e35b1;
--bs-btn-primary-hover-bg: #5e35b1;
}
这样只影响 .my-dashboard 内的按钮，不影响导航栏或表单里的同名组件。注意：变量继承是向下传递的，父容器设了，子元素自动生效，无需重复声明。
别忘了衍生变量和对比度
Bootstrap 5.3+ 会根据 --bs-primary 自动生成文本/背景对比色，比如 --bs-primary-text-emphasis 和 --bs-primary-bg-subtle。只改 --bs-primary 而不更新这些，可能导致按钮文字发灰、alert 背景看不清。
- 手动补全常见衍生变量：
--bs-primary-rgb（用于rgba()）、--bs-primary-text-emphasis、--bs-primary-bg-subtle - 值必须是合法 CSS 颜色字符串，
#4a6fa5✅，blue❌（浏览器兼容性差） - 拼错变量名（如
--primary少了bs-前缀）或漏分号，整行会被静默忽略，Computed 面板里根本看不到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
