必须使用Sass版本Bootstrap并提前定义$primary变量：先声明$primary: #xxx;，再依次@import functions、variables和bootstrap；若仅引入bootstrap.min.css或顺序错误，则修改无效。
直接改 $primary 这类变量前，先确认你用的是 Sass 版本的 Bootstrap
npm 安装的 bootstrap 包里有 scss/ 目录才是真 Sass；如果只引入了 bootstrap.min.css，改变量完全无效。检查你的项目是否 import 了 bootstrap/scss/bootstrap.scss 或其中某部分（比如 bootstrap/scss/_variables.scss），而不是仅 link CSS 文件。
常见错误：在 JS 里 import 'bootstrap/dist/css/bootstrap.css'，然后试图在另一个 Sass 文件里覆盖 $primary——这时变量早已被编译成固定颜色，覆盖无效。
- 正确路径示例：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; - 必须在 import
bootstrap/scss/variables之前 定义自己的变量值，否则会被默认值覆盖 - Bootstrap 5+ 的变量大多带
!default，所以只要提前声明就能生效
覆盖 $primary、$body-bg 等基础变量的写法
不是所有变量都能直接改——有些是计算生成的（如 $primary-rgb、$primary-text-emphasis），它们依赖 $primary 值自动推导。所以优先改源头变量，别手动同步一堆衍生值。
示例：想把主色改成深蓝，只需在 import Bootstrap 变量前写：
立即学习“前端免费学习笔记（深入）”；
$primary: #0d6efd; $body-bg: #f8f9fa; $font-family-sans-serif: "Inter", -apple-system, sans-serif;
注意：$enable-negative-margins、$enable-shadows 这类开关变量是布尔值，必须写 true 或 false，不能写字符串。
- 颜色变量名保持小写连字符格式（
$gray-900），别写成$gray900 - 字体栈中引号要统一，推荐单引号包裹自定义字体名
- 改
$grid-breakpoints这类 map 变量时，必须用map-merge()，不能直接赋值
修改 $grid-breakpoints 或 $theme-colors 这类 map 变量
这类变量是 Sass map，直接赋值会整个替换掉默认结构，容易漏掉 Bootstrap 内部依赖的 key（比如 dark、light）。要用 map-merge() 安全叠加。
例如扩展主题色，同时保留默认的 primary、success：
$theme-colors: map-merge(
(
"indigo": #4b0082,
"teal": #008080
),
$theme-colors
);
再比如调整断点，在原有基础上加一个 xxl：
$grid-breakpoints: map-merge(
("xxl": 1400px),
$grid-breakpoints
);
-
map-merge()第一个参数是新增/覆盖项，第二个是原 map，顺序反了会丢默认值 - 改完
$grid-breakpoints后，记得同步更新$container-max-widths，否则容器宽度不会响应新断点 - 不要用
map-set()—— Bootstrap 5.3+ 才支持，旧版本不兼容
为什么改了变量但按钮颜色没变？常见失效场景
最常踩的坑是：变量改了，但组件样式没重编译，或者被后加载的 CSS 规则强行覆盖（比如自定义 class 里写了 background-color: red !important）。
- 确保你的 Sass 文件最终被构建工具（Vite、Webpack、Dart Sass CLI）真正编译，而不是只 copy 了原始 CSS
- 检查浏览器开发者工具里按钮元素的 computed style，看
background-color是来自.btn-primary还是别的规则 - 如果用了 Bootstrap 的 CSS custom properties（如
--bs-primary），那是从 JS 动态注入的，Sass 变量改了也不影响它——得关掉$enable-css-custom-properties或手动覆盖 CSS 变量 - 某些组件（如
form-check）的颜色依赖$form-control-color而非$primary，得查对应变量名
变量生效链条很短：Sass 编译 → CSS 输出 → 浏览器渲染。中间任何一环断开，就看不到效果。尤其要注意构建配置里是否启用了 Sass 的 includePaths，否则 @import 可能找不到 Bootstrap 的 scss 文件。
