Bootstrap 5 的 CSS 变量（如 --bs-primary）运行时修改基本无效，因其工具类（.btn-primary、.bg-primary）是 Sass 编译时硬编码生成的，未通过 var(--bs-primary) 动态计算；CDN 版本中变量仅为占位符，不参与主体样式逻辑，必须重编译 Sass 源码才能真正生效。
Bootstrap 5 的 CSS 变量（如 --bs-primary）在运行时修改基本无效，不是你写错了，而是它压根没被用在关键样式上。
为什么 document.documentElement.style.setProperty('--bs-primary', '#ff0000') 没反应？
因为 Bootstrap 5 的工具类（比如 .btn-primary、.bg-primary）是编译时“写死”的，不是靠 var(--bs-primary) 动态计算出来的。你改了变量，但对应的选择器样式早已生成并固化，浏览器不会重算。
- CDN 版本（
bootstrap.min.css）里，--bs-primary只出现在 :root 声明和极少数辅助类中，不参与主体组件逻辑 - 像
.btn-primary { background-color: #0d6efd; }这种声明，源码里就是硬编码值，Sass 编译后就没了变量痕迹 - 哪怕你在控制台手动加
:root { --bs-primary: red; }，按钮颜色也不会变——查元素面板就能看到，.btn-primary 的 background-color 仍是原始色值，没走 var()
哪些地方真用了 CSS 变量？
只有少量新引入的组件或辅助类才真正依赖变量，且集中在 Bootstrap 5.2+：
-
.pagination系列有--bs-pagination-bg、--bs-pagination-border-color，但仅限于基础分页容器，.page-link仍用硬编码 -
.form-control的--bs-form-control-bg、--bs-form-control-border-color在部分状态生效，但 focus outline、invalid 样式仍绕过变量 -
data-bs-theme="dark"会切换:root下的一组暗色变量，但前提是你的 CSS 是从 Sass 源码重编译的，CDN 版本只做静态 fallback
想让变量起作用，必须重编译 Sass 源码
这不是“技巧”，是唯一可靠路径。CDN 版本不支持运行时换肤，所有变量都是编译占位符。
立即学习“前端免费学习笔记（深入）”；
- 复制
node_modules/bootstrap/scss/_variables.scss到项目，重命名为_custom-variables.scss - 在其中修改
$primary: #e43、$enable-shadows: true等，**必须放在 @import bootstrap 之前** - 用
sass custom.scss dist/css/bootstrap-custom.css编译，输出的新 CSS 才真正由变量驱动 - 别试图在 JS 里动态切
:root变量再指望 .btn 重绘——它不会，除非你整个替换<link>标签加载新 CSS 文件
最容易被忽略的兼容性陷阱
就算你成功重编译并用了变量，旧版 Safari（11.1 之前）仍会静默忽略 color: var(--bs-primary)，最终渲染成继承色或 transparent。
- 所有用到
var(--bs-*)的地方，必须前置 fallback：color: #0d6efd; color: var(--bs-primary); -
data-bs-theme="dark"在 Safari 11 中完全无效，页面只是回退到浅色，控制台无报错，很难发现 - 构建工具（如 Vite）若启用了 CSS 提取或 minify，可能把
var(--x)错误内联或删掉，需检查输出产物是否保留变量引用
