直接修改 _variables.scss 无效，因 Bootstrap 的变量使用 !default 且需在 @import "variables" 前覆盖；正确做法是在主入口文件中，于 functions 后、variables 前导入自定义变量文件。
为什么直接修改 _variables.scss 不起作用？
因为 Bootstrap 的官方 _variables.scss 是只读的“源文件”，你本地项目里改它，下次 npm update bootstrap 就会被覆盖；更关键的是，Sass 的变量定义有“首次赋值优先”规则——Bootstrap 在 @import 你自定义变量前，已经用默认值声明过所有 $xxx 变量了，后定义无效。
正确做法是：在你自己的主 Sass 入口（比如 app.scss）中，先于 Bootstrap 的 @import 语句，导入你写的变量重写文件。
- 确保你的自定义变量文件（如
_custom-variables.scss）放在 Bootstrap 的@import "~bootstrap/scss/functions";之后、@import "~bootstrap/scss/variables";之前 - 必须用
!default声明原始变量才能被覆盖——而 Bootstrap 恰好全用了!default，所以你只要抢在它@import variables前定义同名变量，就能生效 - 不要删掉没改的变量：只覆盖你需要的，其余留空，让 Bootstrap 的默认值兜底
如何安全地覆盖 $primary、$body-bg 这类基础颜色变量？
这类变量在 Bootstrap 中属于“顶层可配置项”，覆盖最简单，但要注意依赖链。例如 $primary 不仅影响按钮，还参与生成 $primary-emphasis、$primary-text-emphasis 等派生色——这些是 Bootstrap 在 functions 或 variables 后续逻辑中计算出来的，不是硬编码。
所以你只需覆盖原始变量，后续自动更新：
// _custom-variables.scss $primary: #2563eb; // 用 Tailwind 风格的 indigo-600 $body-bg: #f9fafb; $font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
- 务必确认你覆盖的变量名和 Bootstrap 版本一致（v5.3 和 v5.2 的
$enable-negative-margins默认值不同） - 颜色变量推荐用十六进制或 RGB，避免用命名色（如
red），否则可能触发 Sass 编译警告 - 字体栈中保留系统默认 fallback，否则在某些 Linux 或旧 Windows 上会降级失败
@import 顺序错了会导致哪些典型错误？
最常见的表现是：编译不报错，但样式完全没变，或者部分组件颜色/间距异常。比如你发现 .btn-primary 还是蓝色，但 .alert-primary 却是紫色——这说明 $primary 被部分模块读取了旧值，部分读取了新值，根源就是 @import 顺序混乱。
标准顺序必须是：
// app.scss @import "functions"; // Bootstrap 函数（必需最先） @import "variables"; // ← 别在这儿改！这是 Bootstrap 默认变量 @import "custom-variables"; // ✅ 必须放这里：functions 之后、variables 之前 @import "bootstrap/scss/bootstrap"; // 最后导入全部
- 如果你用的是 Bootstrap 官方 npm 包，路径要写成
~bootstrap/scss/functions，不能漏掉~（Webpack/Vite 别名） - 别把
custom-variables放在bootstrap/scss/bootstrap里面——那会变成重复 import，Sass 会跳过第二次定义 - Vite 用户注意：如果启用了
css.preprocessorOptions.sass.additionalData，它会全局注入，反而破坏变量覆盖逻辑，建议禁用
覆盖 $grid-breakpoints 或 $spacers 这类结构变量要注意什么？
这类变量直接影响响应式栅格和间距系统，改动后所有依赖它的 mixin（如 make-col、spacing）都会重新计算。好处是彻底，坏处是容易引发意料外的断点偏移或 padding 错位。
例如修改 $spacers：
// _custom-variables.scss $spacers: ( 0: 0, 1: 0.25rem, // 4px 2: 0.5rem, // 8px 3: 0.75rem, // 12px 4: 1rem, // 16px ← 常用基准 5: 1.5rem, );
- 必须保持 key 名（
0,1,2…）不变，否则mt-3这类工具类会找不到对应值 - 修改
$grid-breakpoints后，记得同步检查$container-max-widths，否则大屏下容器宽度可能卡在旧值 - 这类变量一旦改了，所有基于它们的工具类（
px-4,col-lg-6）都会立即生效，无需额外操作——但测试时要覆盖所有断点尺寸
真正麻烦的不是怎么写，而是改完之后要不要同步更新设计系统文档、UI 组件库的 token 映射，以及团队成员是否清楚这些变量现在指向哪套数值体系。
