直接改--bs-primary无效，因Bootstrap 5组件多依赖--bs-primary-rgb等派生变量或Sass编译静态值；漏设--bs-primary-rgb会导致透明度、阴影等回退默认蓝，且深色模式需单独配置--bs-primary-dark-rgb。
直接改 --bs-primary 没效果，不是变量写错了，是它压根没被组件样式消费——Bootstrap 5 的大多数工具类（比如 .btn-primary）根本不读这个变量，而是依赖 --bs-primary-rgb 或 Sass 编译时的硬编码值。
为什么只设 --bs-primary 会失效
浏览器无法从 HEX 自动解析出 RGB 元组，而 Bootstrap 5 大量使用 rgba(var(--bs-primary-rgb), .2) 这类写法。你漏设 --bs-primary-rgb，所有带透明度、阴影、渐变的地方都会 fallback 到默认蓝（#0d6efd）。
-
--bs-primary-rgb必须手动设置，例如：--bs-primary-rgb: 231, 76, 60（对应#e74c3c） - 深色模式（
data-bs-theme="dark"）会启用另一套变量，需同步配置--bs-primary-dark-rgb - 第三方库（如 Chart.js 的 tooltip）若引用 Bootstrap 变量，常读的是
--bs-gray-500而非--bs-body-color，得查它实际用哪个
哪些变量改了才真正起作用
真正被工具类广泛消费的，集中在数值型或 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 这类语义色，仅用于极少数新类（如 .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; }，会彻底屏蔽你的变量
:root 块必须在所有 Bootstrap CSS 加载之前注入，否则会被其覆盖——这点最容易被忽略。
