bootstrap 5.3+ 废弃了--primary等简写变量，全面采用--bs-{property}-{level}命名体系，必须同时定义--bs-primary和--bs-primary-rgb才能确保颜色及透明度类正常生效。
Bootstrap 5 升级后自定义 CSS 变量命名失效，不是变量写错了，而是你改的变量名根本没被任何样式规则消费——升级后 Bootstrap 更彻底地转向了 --bs-{property}-{level} 命名体系，旧版中还能间接起效的 --primary、--body-bg 等简写变量，现在全被移除或降级为 Sass 变量，CSS 层面不再引用。
为什么 --primary 改了但按钮颜色不变？
Bootstrap 5.3+ 的 .btn-primary 内部用的是 background-color: var(--bs-primary)，但这个 --bs-primary 本身只是个“占位符”，真正被渲染引擎读取并用于透明度、阴影、渐变等场景的是 --bs-primary-rgb。如果你只设了：
:root {
--primary: #e74c3c;
}
那它完全不会生效——因为没有任何一条 Bootstrap CSS 规则引用 --primary。必须改成：
:root {
--bs-primary: #e74c3c;
--bs-primary-rgb: 231, 76, 60;
}
-
--bs-primary用于纯色场景（如color、background-color） -
--bs-primary-rgb用于rgba(var(--bs-primary-rgb), .2)、hsl(from var(--bs-primary-rgb) h s l)等需要分量的函数 - 漏掉后者，所有带透明度的组件（
.btn-outline-primary、.link-primary悬停态）都会 fallback 到默认蓝
哪些变量名在升级后被废弃或重命名？
Bootstrap 5.2 升到 5.3+ 后，大量语义变量被标准化、拆分或弃用。常见“看似合理但实际无效”的命名包括：
-
--text-muted→ 已移除，改用--bs-secondary-color或--bs-gray-600 -
--border-color→ 不再被.border类消费，改用--bs-border-color -
--body-bg→ 不再生效，必须用--bs-body-bg -
--font-size-base→ 是 Sass 变量，CSS 层面无对应变量；字号控制靠--bs-body-font-size和响应式断点变量（如--bs-body-font-size-sm）
所有有效变量都落在 --bs- 前缀下，且多数带明确层级后缀（-sm、-md、-dark、-rgb）。
如何快速验证变量是否被真实使用？
别只看 DevTools 的 Styles 面板里有没有声明，要查目标元素的最终计算值来源：
- 选中一个
.btn-primary元素 → 打开 Computed 标签页 → 搜background-color - 如果值是
rgb(13, 110, 253)且来源显示bootstrap.min.css，说明你的--bs-primary没穿透进去 - 鼠标悬停在 Styles 面板中的
var(--bs-primary)上：若提示 “invalid” 或无颜色预览，说明变量未定义或拼写错误 - 检查是否被更高权重规则覆盖：比如某个 UI 库写了
.btn.btn-primary { background: #0d6efd !important; }，会直接屏蔽 CSS 变量
深色模式下变量为何还是亮色？
Bootstrap 5.3+ 对深色模式采用独立变量体系，data-bs-theme="dark" 不会自动映射亮色变量。你必须显式定义暗色版本：
:root[data-bs-theme="dark"] {
--bs-primary: #818cf8;
--bs-primary-rgb: 129, 140, 248;
--bs-body-bg: #0f172a;
--bs-body-color: #f1f5f9;
}
注意：--bs-primary-dark-rgb 这类命名是错的——Bootstrap 官方不提供带 -dark 后缀的变量，只用 [data-bs-theme="dark"] 下的同名变量覆盖。
最常被忽略的一点：CSS 变量作用域是全局的，:where(.my-bs) 这类命名空间包裹对变量无效，必须在 :root 或 :root[data-bs-theme="dark"] 中重定义整套变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
