必须在@import "bootstrap/scss/variables"前重定义变量，否则静默失效；正确顺序为：先@import functions，再自定义变量（如$primary: #4f46e5），然后@import variables，最后map-merge扩展$theme-colors并显式调用@include theme-colors()。
必须在 @import "bootstrap/scss/variables" 之前重定义变量，否则所有修改静默失效——Sass 变量只认第一次赋值，且顺序错一点，$primary-rgb、$theme-colors 等派生值就还是默认的。
变量重定义必须放在 functions 之后、variables 之前
Bootstrap 的 $primary、$font-size-base 等变量都带 !default，但仅在首次声明时生效。一旦 _variables.scss 被加载，后续赋值完全被忽略。
-
@import "bootstrap/scss/functions"必须最先执行（提供color-contrast()、map-merge()等基础函数） - 紧接着写你的自定义变量块，例如：
$primary: #4f46e5;、$body-bg: #f9fafb; - 然后才是
@import "bootstrap/scss/variables"—— 这时你的值才会真正覆盖 - 漏掉
functions会导致编译报错Undefined variable: "$font-size-base"
新增主题色必须用 map-merge() 增量扩展
直接赋值 $theme-colors: ("navy": #0f766e) 会清空 primary、success 等所有内置键，导致 .btn-secondary 失效、.alert-success 不渲染。
- 先定义颜色变量：
$navy: #0f766e; - 再增量合并：
$theme-colors: map-merge($theme-colors, ("navy": $navy));（注意键名必须加引号） - 最后显式调用：
@include theme-colors();（需确保已导入bootstrap/scss/utilities/api或完整utilities） - 漏掉
@include theme-colors()，就不会生成.text-navy、.bg-navy等工具类
非颜色变量要按依赖链逐个覆写
$border-radius 改了，但 .btn 和 .card 圆角没变？因为它们用的是硬编码值（如 .375rem），而这些值是在编译时由 $border-radius 计算得出的——但前提是它在 @import 链中足够早地生效。
-
$border-radius影响绝大多数组件，但$border-radius-sm、$border-radius-lg是独立变量，需单独设 -
$font-size-base改了，.h1字体不会变（它用绝对值2.5rem），但$font-size-sm（默认是$font-size-base * .875）会响应 - 想全局缩放字体，得同步覆写
$h1-font-size到$h6-font-size、$font-size-lg、$font-size-sm -
$container-max-widths和$grid-breakpoints必须键名一致、单位统一（如xl: 1200px），否则断点逻辑脱节
编译后没生效？先盯住这三件事
“改了但还是蓝色”几乎都卡在这几个环节，而不是代码写错了。
- 项目实际加载的是
bootstrap.min.css（CDN 或dist/css下），根本没走 Sass 编译流程 → 检查 HTML 中<link>是否指向你构建出的 CSS，且构建入口是你写的custom.scss - 构建工具（Webpack/Vite）配置了
additionalData自动注入变量 → 它可能把你手动写的$primary覆盖或冲突了 - 用了 Node Sass → 已废弃，不支持 Bootstrap 5.3+ 新函数；运行
npx sass --version确保是 Dart Sass
最易被忽略的是：所有衍生变量（$primary-rgb、$primary-hover、$primary-text-emphasis）都不自动生成，必须手动同步更新，否则阴影、透明边框、深色模式文字色全都会 fallback 到默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
