必须在sass编译前重定义$primary变量，否则无效；直接改.btn-primary仅影响默认态，漏掉:hover、:disabled及.alert-primary等所有依赖$primary的组件和状态。
必须在 Sass 编译前重定义变量，否则所有修改都无效——浏览器根本看不到你写的 $primary: red;，因为它压根不是 CSS。
为什么直接改 .btn-primary 的 background-color 会漏掉一堆地方
你写 .btn-primary { background-color: #ff6b35; } 只能改按钮默认态；:hover、:disabled、.alert-primary、.text-primary、.border-primary 全部还是原来的蓝色。因为这些类背后依赖的是 Sass 变量 $primary，而不是某个统一的 CSS 变量。Sass 编译时已经把所有用到 $primary 的地方展开成具体值了，运行时没法回溯。
- 检查 DevTools：展开任意一个
.btn-primary元素，看background-color是不是具体色值（如#0d6efd），而不是var(--bs-primary) - 颜色变量不单是
$primary：还要同步改$primary-rgb（用于rgba()场景）和$primary-text-emphasis（深色背景下的文字对比度） - 别改
node_modules/bootstrap/scss/_variables.scss：升级时会被覆盖，新建自己的_custom.scss文件来覆盖
正确的变量重定义顺序不能错
Bootstrap 的 Sass 文件有严格加载顺序：functions → variables → mixins → 组件。你自定义的变量必须插在 @import "bootstrap/scss/functions"; 之前，否则会被默认值覆盖。
- ✅ 正确顺序：
$primary: #ff6b35;→@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables"; - ❌ 错误写法：
@import "bootstrap/scss/bootstrap";后再写$primary: red;—— 这行 Sass 代码编译时早已失效 - 只覆盖需要的变量即可：
$font-size-base、$border-radius、$enable-shadows等都可单独改，未声明的仍走 Bootstrap 默认值
字体、圆角、阴影等非颜色变量也得按规则来
比如改圆角：$border-radius 控制所有组件（.btn、.card、.form-control）的默认值，但 --bs-border-radius 这个 CSS 变量只影响 .rounded 工具类，对按钮完全无效。
-
$font-size-base不控制所有字体：标题类（.h1）用绝对值，.alert用$font-size-sm，所以要全局缩放，得一并改$h1-font-size到$h6-font-size和$font-size-sm/$font-size-lg - 开关类变量如
$enable-rounded、$enable-shadows必须设为true或false，不能写字符串或空值 - 想支持深色模式？别靠 JS 切换 class，用 Sass 的
if($enable-dark-mode, #4dabf7, #0d6efd)在变量层做分支
构建工具链没配好，Sass 定制就只是纸上谈兵
如果你用的是 bootstrap.min.css 直接引入，那上面所有 Sass 操作都毫无意义——你连 Sass 编译器都没过一遍。
- 确认你用的是
bootstrap/scss/源目录，不是dist/下的编译后文件 - Vue CLI / Create React App 需装
sass和sass-loader；Vite 用户需配vite-plugin-sass并确保@import路径解析正确 - npm 包路径写法推荐用
~bootstrap/scss/functions，避免相对路径出错
最常被忽略的一点：Sass 变量定制是编译时行为，它不提供运行时切换能力。如果项目真需要用户点击“换肤”实时生效，得自己补逻辑——比如用 JS 切换 :root 下的 --bs-primary，再额外重写关键组件的样式规则，Bootstrap 原生不支持这个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
