必须在@import "bootstrap/scss/functions"前定义$primary并重编译Sass，否则悬停色等衍生样式仍用默认值；还需同步设置$primary-rgb、$primary-text-emphasis等衍生变量以确保文字可读和深色模式适配。
直接改 $primary 等 Sass 变量就能生效，但必须在 @import "bootstrap/scss/functions" 之前定义，否则会被默认值覆盖——这是绝大多数人失败的根源。
为什么只改 $primary 后按钮悬停色还是蓝的？
Bootstrap 的组件状态样式（如 :hover、:disabled、.alert-primary 文字色）不是硬编码颜色，而是依赖衍生变量计算出来的。你只改了 $primary，但没同步更新 $primary-rgb 和 $primary-text-emphasis，Sass 编译器就仍用旧值生成 CSS。
-
$primary: #059669→ 必须配套设$primary-rgb: 5, 150, 105（用red($primary)等函数可算） -
$primary-text-emphasis决定文字是否可读，深色模式下尤其关键；不设它，.alert-primary可能黑底白字变黑底黑字 - 所有以
-text-emphasis、-bg-subtle、-border-subtle结尾的变量，都需按需补全
如何让字体缩放真正全局一致？
$font-size-base 不是“全局字体基准”，它只被部分组件（如 .alert、.form-text）直接引用；.h1 用的是独立变量 $h1-font-size，.lead 用的是 $lead-font-size。只动一个，其余照旧。
- 要统一缩放，得批量覆盖：
$font-size-base、$h1-font-size到$h6-font-size、$lead-font-size、$small-font-size、$font-size-sm、$font-size-lg - 别碰
$font-size-root：Bootstrap 5 并未大规模基于它推导，改了反而可能断掉某些 rem 计算逻辑 - 检查
node_modules/bootstrap/scss/_variables.scss中所有font-size开头的变量，确认是否遗漏
自定义变量该写在哪？加载顺序错一点就全失效
变量声明位置比内容更重要。Sass 是线性编译，一旦 @import "bootstrap/scss/functions" 执行，所有 Bootstrap 内部变量就已锁定。
- 正确路径：新建
custom-bootstrap.scss，顶部第一行开始写变量，然后依次@importfunctions → variables → mixins → root → reboot → …… - 错误示例：
@import "bootstrap/scss/bootstrap"后再写$primary: red→ 完全无效 - 推荐加
!default：如$primary: #059669 !default，避免被项目中其他 Sass 文件意外重定义 - Vue/React 项目中，确保这个文件是最终打包入口的唯一 Sass 入口，别让多个
@import链路互相覆盖
最常被忽略的点：改完变量后，必须重新编译整个 Bootstrap Sass 源码，不能只靠 bootstrap.min.css + 外部 CSS 覆盖——那样永远拿不到衍生状态样式和响应式断点逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
