直接改$primary变量可换主题色，但需同步更新$primary-rgb、$primary-text-emphasis等衍生变量，并用@use语法在引入前定义，确保所有依赖色一致生效。
直接改 $primary 变量就能换主题色，但别漏掉依赖它的其他变量
Bootstrap 5 的主题色（如 primary、secondary）由一组 Sass 变量控制，默认定义在 scss/_variables.scss 中。最直接的方式是覆盖 $primary，比如设为 #2a58a2。但要注意：$blue 是 $primary 的基础色（默认值），而 $primary-rgb、$primary-text-emphasis、$primary-bg-subtle 等都依赖它自动计算。只改 $primary 不改 $blue，会导致部分 utility 类（如 .bg-primary 的浅色背景）颜色不一致。
推荐做法是：在自定义 Sass 入口文件（如 custom.scss）顶部，先重定义基础色变量：
$blue: #2a58a2; $primary: $blue; $primary-rgb: to-rgb($primary); $primary-text-emphasis: color-contrast($primary); $primary-bg-subtle: color-mix(in srgb, $primary 15%, white);
这样所有衍生色都会同步更新，避免视觉断层。
用 @use 替代 @import 才能正确覆盖变量
Bootstrap 5.3+ 强制要求使用 @use（而非旧版 @import）加载 Sass 模块，否则变量覆盖会失效——因为 @import 是顺序合并，而 @use 要求显式指定作用域和配置。
你的入口文件必须这样写：
// custom.scss
// 1. 先定义/覆盖变量（必须在 @use 之前）
$primary: #2a58a2;
// 2. @use 并传入配置（注意：bootstrap 5.3+ 支持 $theme-colors 配置）
@use "bootstrap" with (
$primary: $primary,
$theme-colors: (
"primary": $primary,
"success": #28a745,
"warning": #ffc107
)
);
// 3. 可选：再加载额外组件
@use "bootstrap/scss/utilities";
关键点：
-
@use必须在所有变量定义之后 -
with块里重复声明$primary是为了确保核心逻辑读取到新值 - 如果只改个别色，
$theme-colors显式补全其他色，否则未声明的会回退到 Bootstrap 默认值
编译时出错说 Can't find stylesheet to import？检查路径和包安装方式
这个错误通常不是路径写错，而是 Node Sass / Dart Sass 找不到 Bootstrap 的 node_modules 内部路径。常见原因有三个：
- 没装
bootstrapnpm 包（只下载了 CSS 文件）→ 必须运行npm install bootstrap - 用了旧版 Bootstrap（v4 或更早）→ v4 不支持
@use，必须升级到 v5.3+ - Sass 加载器没配
includePaths→ Webpack/Vite 需显式添加node_modules到 Sass resolver
Vite 用户在 vite.config.ts 中加：
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "./src/styles/variables.scss" as *;',
// 关键：让 Sass 能 resolve node_modules/bootstrap
includePaths: ['node_modules'],
}
}
}
Webpack 用户则需在 sass-loader 的 options 里加 includePaths: ['node_modules']。
改完变量却没生效？检查 CSS 加载顺序和浏览器缓存
最常被忽略的是：你编译出了新 CSS，但 HTML 里仍引用着 CDN 上的原始 Bootstrap CSS，或者旧的本地 bootstrap.min.css。
确认以下三点：
- HTML 中删掉所有
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">这类外链 - 确保只引入你自己编译出的 CSS 文件，例如
<link href="/assets/custom.css"> - 浏览器强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R），禁用缓存调试
进阶验证：打开 DevTools → Elements → 找一个 .btn-primary 元素，看 computed 样式里的 background-color 是否是你设的 #2a58a2。如果不是，说明加载的仍是旧 CSS。
真正麻烦的从来不是改哪个变量，而是变量改了之后，哪些地方会连锁反应、哪些构建环节会静默失败。尤其当项目里混用 CSS-in-JS、CDN 和本地 Sass 时，颜色不一致往往不是变量没改对，而是样式被多处注入、优先级打架。
