<p>Bootstrap 4 不支持 CSS 自定义属性（即 --bs-* 变量），仅依赖 Sass 变量（如 $primary、$spacer）和编译链，改主题必须重编译；而 Bootstrap 5 支持运行时 CSS 变量重写，无需构建即可动态切换主题。</p>
Bootstrap 4 根本没有 CSS 变量，别找错对象
直接说结论：Bootstrap 4 不支持 CSS 自定义属性（即 --bs-* 变量），它只用 Sass 变量（如 $primary、$spacer）。所谓“迁移 CSS 变量”，其实是从 Sass 编译链切换到运行时变量控制——不是把旧变量“搬过来”，而是换一套机制。
常见错误现象：在 Bootstrap 4 项目里搜 --bs-primary，结果全无匹配；或者把 Bootstrap 4 的 _variables.scss 里的 $primary: #007bff 直接抄成 --bs-primary: #007bff 写进 :root，发现按钮颜色没变——因为 Bootstrap 4 的 CSS 文件压根不引用这些变量。
Bootstrap 5 中哪些 --bs-* 变量最值得改且安全
Bootstrap 5 把样式参数暴露为 CSS 变量，但不是所有 --bs-* 都该动。改错一个可能让整个栅格或表单失序。
-
--bs-primary：影响.btn-primary、.form-check-input:checked、链接色等，改后效果明确，副作用小 -
--bs-body-bg和--bs-body-color：决定页面默认背景和文字色，几乎所有组件继承后者，优先级高 -
--bs-border-radius：控制按钮、卡片、输入框圆角，但类如.rounded-0会覆盖它，不影响语义 -
--bs-gutter-x和--bs-gutter-y：影响所有.g-*、.gx-*、.gy-*类，改了会影响整站栅格间距
别碰 --bs-primary-rgb 这类衍生变量——它们由 Bootstrap 自动计算生成，手动改会导致 btn-outline-primary 等组件颜色异常。
立即学习“前端免费学习笔记（深入）”；
为什么写了 --bs-primary 但按钮还是蓝色
写对变量名、放对位置、躲开覆盖，三者缺一不可。
- 变量名必须准确：
--bs-primary（v5.2+），不是--primary或--bs-blue - 必须在
bootstrap.min.css加载之后声明，推荐放在<head>末尾的<style>:root { ... }</style> - 检查是否有其他
:root声明在后面覆盖你——比如第三方 UI 库或另一个<style>标签 - 打开 DevTools → Elements → 选中按钮 → Computed 标签页，看
background-color是否显示为var(--bs-primary)；如果不是，说明变量根本没生效
迁移时最容易被忽略的耦合点
你以为只改个颜色就完事？其实很多地方是链式依赖：
-
--bs-gutter-x不仅影响.g-3，还决定.container-fluid默认左右内边距；设成0会消除空白，但也让所有.gx-*失效 -
--bs-emphasis-color在 Bootstrap 5.3+ 才稳定支持，5.2 及更早版本设了也无效 - 如果你项目原有 Sass 定制（比如覆盖了
$theme-colors），升级后这些 Sass 变量已失效，但对应的 CSS 变量（如--bs-info）仍沿用 Bootstrap 默认值——得手动同步 - 深色模式不能只靠改变量：CSS 变量本身不触发媒体查询，需配合
@media (prefers-color-scheme: dark)重新设:root，且所有变量都要重定义
