唯一可靠方式是直接改$primary变量并重新编译Sass；错误顺序（先@import variables后赋值）导致无效，正确顺序为先声明$primary: #2563eb;再依次导入functions、variables和bootstrap。
直接改 $primary 变量并重新编译 Sass 是唯一可靠方式；任何在 CSS 层覆盖 .btn-primary 或用 !important 强行修改，都会导致状态不一致、工具类断裂、深色模式失效。
为什么改了 $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” - 推荐用：
$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 中加载的是你构建出的 CSS 文件 - 如果用了 PostCSS 插件，它只能处理已存在的 CSS 变量（如
--bs-primary），无法改变map-get($theme-colors, "primary")这类 Sass 计算逻辑
真正生效的关键不在“改多少变量”，而在于是否让所有依赖 $primary 的衍生色（比如 $primary-rgb、$primary-text-emphasis）都同步更新——这要求你从源头控制，而不是只碰一个点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
