直接覆盖Bootstrap 5的CSS变量会失效，因为其工具类样式是编译时写死的而非动态计算；必须用Sass源码重编译才能实现真换肤，CDN版本仅支持静态变量且不响应运行时修改。
为什么直接覆盖 Bootstrap 5 的 CSS 变量会失效？
Bootstrap 5 默认把大部分颜色、间距等样式写死在 .btn、.bg-primary 这类工具类里，而不是通过 --bs-primary 等变量动态计算。你改了根元素的 :root 变量，但组件样式没重算，换肤就只是“看起来改了”，实际按钮、卡片颜色纹丝不动。
真正起效的前提是：Bootstrap 的 CSS 必须从变量生成 —— 这需要你用 Sass 源码重新编译，而不是直接引用 bootstrap.min.css。
- 官方 CDN 版本（
bootstrap.min.css）不支持运行时换肤，变量只是编译时占位符 - 必须使用
bootstrap/scss/源码 + 自定义_variables.scss重编译 - 若坚持用 CDN，只能靠 JS 批量替换 class（比如把
bg-primary替成bg-dark），不是真换肤
如何用 Sass 重编译实现可变主题？
核心是接管 Bootstrap 的变量注入链：修改 $primary 等基础色变量 → 重编译 → 输出新 CSS。Sass 支持 map-merge 和条件导入，能按需切换主题配置。
示例结构：
立即学习“前端免费学习笔记（深入）”；
// themes/light.scss $primary: #0d6efd; $secondary: #6c757d; @import "../node_modules/bootstrap/scss/bootstrap";
// themes/dark.scss $primary: #6f42c1; $secondary: #adb5bd; @import "../node_modules/bootstrap/scss/bootstrap";
- 每个主题文件只改变量，不碰 Bootstrap 源码
- 编译命令如：
sass themes/light.scss dist/css/bootstrap-light.css - 避免在
_variables.scss里硬编码，改用$theme-map: (light: (...), dark: (...))+@each动态生成多主题 CSS
运行时切换主题的 JS 实现要点
编译出多个 CSS 文件后，换肤本质是动态 <link> 切换，而非修改 :root 变量。这点常被误解。
- 用
document.getElementById('theme-css').href = 'bootstrap-dark.css'替换样式表，浏览器会自动重绘 - 务必给
<link>加id="theme-css"，否则无法精准控制 - 切换前清空旧样式表缓存：
link.onload = () => oldLink.remove()，避免残留规则冲突 - 不要用
localStorage存 theme name 后再 JS 注入 style 标签 —— Bootstrap 工具类不响应内联 style，无效
哪些组件会“不听话”？
即使用了 Sass 编译，部分组件仍绕过变量体系，比如 .form-control:focus 的 box-shadow 是写死的 0 0 0 0.25rem rgba(13, 110, 253, 0.25)，不是用 rgba(var(--bs-primary-rgb), .25)。
- 检查
bootstrap/scss/_forms.scss和_buttons.scss，手动把硬编码值替换成var(--bs-primary)或rgba(var(--bs-primary-rgb), .25) -
.btn-outline-*类依赖$enable-important-utilities，设为true才能让border-color: var(--bs-primary)生效 - 图标（如 Bootstrap Icons）不随主题变色，需额外加
.text-primary或用 SVGfill="currentColor"
换肤不是改几个变量就能完事，得盯住编译输出、JS 加载时机、以及那些偷偷写死的样式。最省事的路径是：Sass 重编译 + 多 CSS 文件 + link 替换，别试图用纯 CSS 变量 runtime hack。
