真正响应--bs-primary等css变量的组件包括.btn、.alert、.pagination（v5.3+）、.dropdown-item；而.card边框、.form-check-input图标、bootstrap-icons svg填充等仍硬编码sass值，不响应变量。
哪些组件真正响应 CSS 变量？
不是所有 Bootstrap 5 组件都认 --bs-primary 这类变量。只有明确使用 var(--bs-*) 的组件才生效，比如 .btn、.alert、.pagination（v5.3+）、.dropdown-item。但 .card 的边框色、.form-check-input 的勾选图标颜色、bootstrap-icons 的 SVG 填充色——这些仍硬编码 Sass 值，改 --bs-primary 完全没反应。
查证方法：打开 DevTools → Elements 面板选中目标元素 → Computed 标签页里看 background-color 或 color 的来源是否为 var(--bs-*)。如果显示的是具体十六进制值（如 #0d6efd），说明该属性没走变量链。
必须同步设置的 RGB 变量有哪些？
只改 --bs-primary: #6a5acd 不够。很多地方用的是 rgba(var(--bs-primary-rgb), .1) 这种写法，一旦 --bs-primary-rgb 没定义，整个声明会失效（变成 transparent 或 fallback 色）。
-
--bs-primary-rgb（必须，逗号分隔三位数，如106, 90, 205） -
--bs-secondary-rgb、--bs-success-rgb等同理，只要用了对应主题色的组件就得补 -
--bs-body-color-rgb和--bs-body-bg-rgb影响文字/背景透明叠加效果
漏掉任意一个，.alert-primary 里文字可能发灰，.btn-outline-primary 边框会消失，.bg-primary-subtle 背景直接不渲染。
作用域怎么设才不污染全局？
写 :root { --bs-primary: #059669; } 是最常见错误——它立刻影响整站所有 btn-primary、form-check，连后台管理页都变色。真正可控的做法是局部作用域：
- 给容器加 class，比如
<div class="marketing-section">...</div> - 在该 class 下注入变量：
.marketing-section { --bs-primary: #059669; --bs-primary-rgb: 5, 150, 105; } - 确保子元素继承：Bootstrap 组件需在该容器内，且未被更高优先级规则覆盖
注意：CSS 变量靠继承传递，.marketing-section > .btn-primary 会读取，但 .btn-primary 若被 body 下其他规则强制指定 background-color，变量就失效了。
为什么改了变量但 hover 色没变？
下拉项 .dropdown-item:hover 依赖 --bs-dropdown-link-hover-bg，但这个变量在 v5.2+ 才引入。如果你用的是 v5.1.x 或更早版本，它根本不存在，只能手动覆盖选择器或升级 Bootstrap。
排查步骤：
- 确认 Bootstrap 版本：
console.log(bootstrap.Version)或查node_modules/bootstrap/package.json - 检查变量名拼写：
--bs-dropdown-link-hover-bg不是--bs-dropdown-hover-bg - 看 DevTools 的 Computed 面板里
background-color是否引用了该变量；若显示var(--bs-dropdown-link-hover-bg)但颜色没变，说明变量值没生效（加载顺序错或被覆盖）
最容易被忽略的是：深色模式下 @media (prefers-color-scheme: dark) 会重置部分变量，你得额外补一份暗色版声明，否则 hover 色在暗色模式下可能反白刺眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
