必须在 Sass 编译前重定义变量，如 $primary: #ff6b35;，且需置于 @import “bootstrap/scss/functions” 之前；仅覆盖所需变量，未声明者沿用默认值。
如何修改 Bootstrap 的 $primary 等全局颜色变量
Bootstrap 的主题色不是靠覆盖 CSS 类生效的，必须在 Sass 编译前重定义变量。直接在 CSS 里写 .btn-primary { background-color: #ff6b35; } 只能改局部，按钮悬停、禁用态、表单校验提示等关联样式不会同步更新。
正确做法是：在自定义 Sass 文件（如 _custom.scss）中，**先于导入 Bootstrap 前**声明变量：
$primary: #ff6b35; $secondary: #4a5568; $success: #48bb78; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ……其余组件
- 变量必须放在
@import "bootstrap/scss/functions"之前，否则会被 Bootstrap 默认值覆盖 - 只重定义需要改的变量即可，未声明的仍沿用 Bootstrap 默认值
- 颜色变量名固定为
$primary、$body-color、$font-family-sans-serif等，可在node_modules/bootstrap/scss/_variables.scss中查全量列表
为什么改了 $font-size-base 但部分组件字体没变
Bootstrap 并非所有字体都基于 $font-size-base 计算。比如 .h1 使用绝对值 2.5rem，.alert 用 $font-size-sm，而 $font-size-sm 默认是 $font-size-base * .875 —— 所以如果你只改了 $font-size-base，$font-size-sm 会自动响应，但 .h1 不会。
要全局统一缩放字体，推荐两种方式：
立即学习“前端免费学习笔记（深入）”；
- 重定义整套字体比例变量：
$font-size-base、$font-size-lg、$font-size-sm、$h1-font-size到$h6-font-size - 或改
$font-size-root（仅限使用rem的场景），并在上动态设置font-size，但需注意 Bootstrap 本身未大量依赖它
更稳妥的是通读 _variables.scss 中所有以 font-size 开头的变量，按需覆盖。
如何让自定义主题支持深色模式切换
Bootstrap 5.3+ 原生支持 data-bs-theme="dark"，但它默认只调整少数组件（如 .table、.card 背景）。若你已用 Sass 定制了 $primary 等变量，深色模式下这些颜色很可能在暗背景下不可读。
