直接改--bs-primary无效，因Bootstrap 5组件多依赖--bs-primary-rgb等派生变量或Sass编译静态值；漏设--bs-primary-rgb会导致透明度、阴影等回退默认蓝，且深色模式需单独配置--bs-primary-dark-rgb。
改了 --bs-primary 却没变色，不是变量没写对，是它根本没被用到——Bootstrap 5 的组件样式绝大多数不直接读取 --bs-primary，而是依赖派生变量（如 --bs-primary-rgb）或 Sass 编译时的静态值。
为什么直接改 :root 变量无效？
Bootstrap 5 的 CSS 工具类（如 .btn-primary、.text-primary）内部大多用的是硬编码颜色值或 rgba(var(--bs-primary-rgb), .2) 这类需 RGB 元组的写法。如果你只设了 --bs-primary: #e74c3c，但漏掉 --bs-primary-rgb: 231, 76, 60，那所有带透明度、阴影、渐变的地方都会 fallback 到默认蓝。
-
--bs-primary-rgb必须手动设置，不能靠 JS 自动解析 HEX —— 浏览器不提供此能力 - 深色模式切换（
data-bs-theme="dark"）会触发另一套变量，需单独配置--bs-primary-dark-rgb等 - 第三方组件（如 Chart.js 的 tooltip）若用了 Bootstrap 变量，也得检查它实际读的是哪个名，比如
--bs-gray-500而非--bs-body-color
哪些变量改了才真起作用？
真正被工具类广泛消费的变量集中在 --bs-{property}-{level} 命名空间里，且多为数值型或 RGB 型。例如：
-
--bs-gutter-x和--bs-gutter-y：直接影响.g-3、.gx-2等间距类 -
--bs-body-color和--bs-body-bg：被.text-body、.bg-body直接引用 -
--bs-emphasis-color：控制.text-emphasis的文字色 -
--bs-border-color：影响.border、.table-bordered等边框
而 --bs-primary 这类语义色，仅用于极少数新引入的 CSS 类（如 .link-primary），旧组件仍走 Sass 编译路径。
立即学习“前端免费学习笔记（深入）”；
如何验证变量是否被正确消费？
别只看 :root 里有没有定义，要查目标元素的 computed style 是否真正用了该变量：
- 在 DevTools 的 Elements 面板选中一个
.btn-primary，展开 Styles → 找到background-color，鼠标悬停在var(--bs-primary)上 —— 若显示 “invalid” 或无提示，说明未生效 - 点开 Computed 标签页，搜
background-color，看最终值来源是bootstrap.min.css还是你自定义的 CSS；如果是前者，说明变量未穿透 - 检查是否被更高权重规则覆盖：比如某个组件库的
.btn.btn-primary { background: #0d6efd !important; }会彻底屏蔽你的变量
最常被忽略的一点：CSS 变量只对声明后定义的规则生效，:root 块必须在所有 Bootstrap CSS 加载之前注入，否则会被其内联的 :root 覆盖 —— 尤其在动态插入 style 标签或使用 Shadow DOM 时。
