Bootstrap 5.2+仅支持--bs-primary，旧版不支持CSS变量；需用未压缩bootstrap.css或Sass编译；须补全--bs-primary-rgb等配套变量；:root声明须在Bootstrap之后；深色模式需手动添加data-bs-theme="dark"及对应变量。
变量名拼错或版本不匹配
最常见的原因是把 --bs-primary 写成 --primary、--bs-blue 或 --bs-btn-primary-bg。Bootstrap 5.2+ 官方只认 --bs-primary 这个根变量，其他名字不会触发自动衍生逻辑。另外，如果你用的是 Bootstrap 5.1 或更早版本，它压根不支持 CSS 变量主题色——那些变量在源码里根本不存在。
没加载带变量的 CSS 文件
CDN 或 dist/ 目录下的 bootstrap.min.css 是压缩版，**所有 --bs-* 变量声明都被删光了**。你写的 :root { --bs-primary: #e63946; } 后续再加载也没用，因为前面根本没有变量定义可继承。必须换用未压缩的 bootstrap.css，或者走 Sass 编译流程（确保 $enable-css-variables: true）。
漏掉配套变量，悬停/边框/文字全乱套
只改 --bs-primary 不够。按钮悬停时背景用的是 rgba(var(--bs-primary-rgb), .1)，边框用的是 --bs-primary-border-subtle，文字强调色来自 --bs-primary-text-emphasis。漏掉任一，对应状态就会回退默认蓝。
-
--bs-primary-rgb: 230, 57, 70;（必须是 RGB 数字，不能是十六进制） --bs-primary-border-subtle: #f0f0ff;--bs-primary-text-emphasis: #1e293b;
作用域或加载顺序错了
你的 :root 声明必须在 Bootstrap 的 :root 之后生效，否则会被覆盖。检查 DevTools 的 Styles 面板，搜索 --bs-primary，确认你写的那条规则是否出现在 Bootstrap 原始声明之后。如果用了多个 <style></style> 块，后写的才能赢；如果引入了第三方 UI 库，它可能也写了 :root，得看谁在 DOM 里更靠后。
真正容易被忽略的是：深色模式下这些变量不会自动切换，data-bs-theme="dark" 必须显式加在 上，且对应的 :root[data-bs-theme="dark"] 变量块得手动补全——否则哪怕 light 模式调好了，切 dark 时按钮立刻变蓝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
