必须在导入bootstrap sass模块前重定义$primary变量，否则编译读取默认值；错误顺序（先@import variables后赋值）导致无效，正确顺序为先$primary: #2563eb;再依次@import functions、variables、bootstrap。
必须在导入 Bootstrap 的 Sass 模块前重定义 $primary 等变量，否则编译时读到的仍是默认值——任何后置 CSS 覆盖都只是表面生效，且必然漏掉状态、工具类和深色模式响应。
为什么改了 $primary 却还是蓝色？
根本原因是变量声明顺序错了。Bootstrap 的 $primary 带 !default，只在首次声明时生效；一旦 bootstrap/scss/variables 被加载，后续赋值就完全被忽略。
- ❌ 错误写法：
@import "bootstrap/scss/variables";后再写$primary: #2563eb;→ 不生效 - ✅ 正确顺序：先声明
$primary: #2563eb;，再依次@import "bootstrap/scss/functions";、@import "bootstrap/scss/variables";、@import "bootstrap/scss/bootstrap"; - 别把变量塞进
node_modules/bootstrap/scss/_variables.scss里——下次yarn upgrade就丢 - 如果你用 Webpack/Vite，慎用
additionalData注入变量，它可能和你手动写的冲突
新增主题色（如 custom-blue）为啥没生成 .text-custom-blue？
Bootstrap 默认只对内置 key（"primary"、"success" 等）调用 theme-colors() mixin 生成工具类。你往 $theme-colors 里加新 key，不等于自动产出对应类。
- 必须显式调用
@include theme-colors();，它定义在bootstrap/scss/utilities/_api.scss中 - 调用前得确保已导入
bootstrap/scss/utilities或至少bootstrap/scss/utilities/api，否则报错 “mixin not found” - 扩展时推荐用
map-merge：$theme-colors: map-merge($theme-colors, ("custom-blue": #0f766e));，避免漏掉"danger"这类默认键 - 检查 DevTools：如果新类没出现在最终 CSS 里，大概率是
theme-colors()没执行，或utilities根本没被引入
用 CDN 或 bootstrap.min.css 能不能改主题色？
不能。CDN 和 dist/css/bootstrap.min.css 是已编译好的产物，Sass 变量早已固化为具体颜色值。你在 SCSS 里改的任何变量，对它们完全无效。
- 路径必须指向
node_modules/bootstrap/scss/，不是dist/目录 - 确认构建入口是你自己的
custom.scss，且 HTML 中<link>加载的是你构建出的 CSS 文件 - 如果用了 PostCSS 插件（如
postcss-custom-properties），它只能处理已存在的 CSS 变量（如--bs-primary），无法改变map-get($theme-colors, "primary")这类 Sass 计算逻辑 - 想用 CSS 变量动态覆盖？仅限 Bootstrap 5.2+ 且组件明确使用了
--bs-primary的部分场景，旧组件或第三方扩展大概率不响应
最容易被忽略的一点：深色模式下 $primary 不会自动变深，--bs-primary 也不会随 prefers-color-scheme 切换——它只是个静态值。要真正适配暗色，得配合 $color-mode-type 和自定义 color-mode 规则，而不是指望变量重定义自动解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
