必须在 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 等变量，深色模式下这些颜色很可能在暗背景下不可读。
解决方案是利用 CSS 自定义属性 + Sass 的 if() 函数，在变量层做条件分支：
$primary: if($enable-dark-mode, #4dabf7, #0d6efd); $body-bg: if($enable-dark-mode, #212529, #fff); @import "bootstrap/scss/functions"; // 后续导入保持不变
再配合 HTML 根节点添加 data-bs-theme="dark"，并确保你的构建流程（如 Webpack 或 Vite）启用了 Bootstrap 的深色模式支持（需开启 $enable-dark-mode: true）。
- 注意：深色模式变量需在
functions导入后才能使用if() - 不是所有变量都适合用
if()，比如$border-radius这类与明暗无关的值应保持统一 - 第三方插件（如 Bootstrap Icons）不自动适配，需单独处理
编译后 CSS 体积暴涨，哪些 @import 可以删减
默认全量导入会把所有组件（包括你根本不用的 carousel、offcanvas）都打进 CSS。实际项目中，删掉不用的 @import 是最有效的瘦身手段。
典型可删项（按使用频率排序）：
-
@import "bootstrap/scss/accordion";（除非真用折叠面板） -
@import "bootstrap/scss/badge";（如果只用文字标签，可用纯 CSS 实现） -
@import "bootstrap/scss/popover";（tooltip 已够用时） -
@import "bootstrap/scss/forms/validated-inputs";（禁用表单校验样式可省）
关键原则：删 @import 不影响已使用的类；但删了 mixins 或 functions 会导致编译失败。务必保留 functions、variables、mixins、root、reboot 和你实际调用组件所依赖的模块（比如用了 .btn-group 就不能删 button）。
真正容易被忽略的是：改了变量后没清缓存，或构建工具（如 Dart Sass CLI）没指定 --load-path 指向 node_modules，导致它加载了旧版变量文件。每次改完变量，先确认终端里 Sass 编译输出的路径是否指向你本地的 node_modules/bootstrap/scss/。
