改变量比覆盖css类更可靠，因为所有组件（如.btn-primary、.alert-primary）和属性（如box-shadow、深色模式、js行为）均源自同一sass变量链，重定义$primary可全链路同步生效；而css覆盖仅局部生效且易导致样式脱节、维护失控。
直接改 bootstrap.min.css 看似快，但实际是给后续维护埋雷——真正高效的是用 Sass 重编译，因为它把“改一处、全链路生效”变成可预测的工程行为。
为什么改变量比覆盖 CSS 类更可靠
Bootstrap 的 .btn-primary、.alert-primary、.bg-primary 并不是各自写死颜色，而是全部从 $primary 变量生成。你改了 $primary: #6f42c1，所有依赖它的类、阴影（box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5)）、深色模式适配都会同步更新。
而硬覆盖 .btn-primary { background-color: #e74c3c !important; } 只影响按钮，.form-check-input:checked 还是蓝的，data-bs-theme="dark" 切换后也毫无反应——因为 CSS 变量没变，JS 组件读的也是变量值。
- 常见错误：上线后发现“主题色只在按钮上生效”，其他组件颜色不一致
- 更隐蔽的问题：Tooltip 初始化时读取
--bs-primary-rgb计算动画起始色，你覆盖 class 不影响它，但改变量会触发行为变化
如何安全重定义 Sass 变量
顺序错了，变量就白定义了。Bootstrap 5 的变量加载有强依赖链，必须严格按顺序导入：
@import "bootstrap/scss/functions"; → @import "bootstrap/scss/variables"; → （在此处重写变量）→ @import "bootstrap/scss/mixins"; → @import "bootstrap/scss/root";
- 不能在
variables前写$primary: #6f42c1，否则报错Undefined variable "$grid-columns" - 不能跳过
functions，否则map-get($theme-colors, "primary")这类调用会失败 - 新增配色如
indigo必须用map-merge($theme-colors, ("indigo": #4b0082))，否则bg-indigo根本不会生成
按需编译能砍掉多少体积
全量引入 bootstrap.min.css gzip 后约 22 KB；但如果你只用网格和表单，通过 Sass 按需导入：
@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";@import "bootstrap/scss/grid";@import "bootstrap/scss/forms";
- 可压缩到 ~8 KB gzip（减少 60%+）
- 禁用组件开关如
$enable-modals: false能彻底移除相关 CSS 输出，不是隐藏，是不生成 - 注意：HTML 中不能再留
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css">，否则样式重复、权重冲突
最常被忽略的一点：Sass 编译不是“改完保存就完事”，它控制的是整个构建期逻辑——断点数量、表单验证图标是否输出、offcanvas 动画是否启用，这些都只能靠变量开关驱动，CSS 变量或手动覆盖完全无感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
