直接修改Sass变量是最干净的方式，需在引入Bootstrap源码前定义$primary等变量；CSS变量（如--bs-primary）仅对5.2+且支持它的组件生效，旧组件或第三方扩展可能不响应；!important覆盖破坏语义和可访问性，PostCSS无法替代Sass重编译。
如何修改Bootstrap 5的$primary等主题变量
直接改Sass变量是最干净的方式，但必须在引入Bootstrap源码前定义，否则会被覆盖。Bootstrap 5用CSS自定义属性（--bs-primary）做运行时主题支持，但底层仍依赖Sass变量生成默认值。
- 在自定义
_custom.scss中先声明变量，再@import "bootstrap/scss/functions"、@import "bootstrap/scss/variables"、@import "bootstrap/scss/maps" - 只覆盖需要的变量，比如
$primary: #2563eb;，别全量复制variables.scss——容易和新版本冲突 - 如果用了Bootstrap官方CDN或已编译的
bootstrap.min.css，这种方式完全无效，只能走CSS变量覆盖或后置样式表
用CSS变量动态覆盖--bs-primary是否可靠
可以生效，但仅限于Bootstrap 5.2+且组件使用了CSS变量（如btn-primary背景色），部分旧组件或第三方扩展仍硬编码Sass值，不会响应变化。
- 全局设置：
:root { --bs-primary: #1e40af; --bs-secondary: #64748b; } - 局部覆盖更安全：
.my-theme { --bs-primary: #059669; }，配合class作用域避免污染 - 注意浏览器兼容性：IE不支持CSS变量，若需兼容，必须回退到Sass重编译
为什么!important覆盖.btn-primary是下策
它能强行改颜色，但破坏了Bootstrap的语义层级和响应式逻辑。比如.btn-primary:hover、.btn-primary:focus可能没同步更新，键盘焦点状态失效，可访问性受损。
- 常见翻车点：只改
background-color，漏掉border-color和color，按钮文字看不见 - 暗色模式下
!important样式无法被@media (prefers-color-scheme: dark)接管 - 未来升级Bootstrap时，类名或结构微调会导致样式大面积崩坏，排查成本远高于前期配置变量
PostCSS插件能否替代Sass重编译
不能。PostCSS（如postcss-custom-properties）只能处理已存在的CSS变量，无法改变Bootstrap源码中map-get($theme-colors, "primary")这类Sass函数调用结果。
- 如果你用Vite或Webpack，推荐用
sassloader +additionalData注入变量，比PostCSS链路更直接 - 某些UI库（如Bootstrap Icons）不走CSS变量，其颜色由SVG内联
fill决定，需单独处理svg.icon-primary { fill: var(--bs-primary); } - 真正省事的方案：用官方主题构建工具（
bootstrap-themes），但仅支持有限变量组合，灵活性不如手写Sass
事情说清了就结束。最常被忽略的是：变量覆盖顺序、CSS变量与Sass变量的双轨并存、以及第三方组件对主题系统的实际支持程度——它们往往不声不响地绕过你的主题配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
