必须将自定义变量文件（含!default声明）置于所有bootstrap导入之前，确保sass变量生效；.btn-primary依赖$primary而非$blue；需确认使用sass源码编译而非cdn预编译包。
变量重定义写在了 @import "bootstrap" 之后
这是最常见也最容易被忽略的问题。Sass 变量只在首次声明时生效，后续赋值会被直接忽略。$primary: #ff6b35 如果出现在 @import "bootstrap/scss/variables" 或 @import "bootstrap" 之后，编译器根本不会认它。
必须把自定义变量文件放在所有 Bootstrap 源文件导入之前，并用 !default 声明：
-
@import "custom-variables";（含$primary: #ff6b35 !default;） @import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";
漏掉 functions 或顺序颠倒，会导致 $font-size-base 等依赖变量未定义，编译直接报错。
改了 $blue 却没影响 .btn-primary
Bootstrap 5+ 明确区分语义色和基础色：.btn-primary 用的是 $primary，不是 $blue；.text-blue、.bg-blue 才读 $blue。
如果你只想换主题色，只动 $primary、$secondary 就够了。同步改 $blue 不仅没必要，还可能意外影响图标颜色、边框、警告框等地方——这些组件显式依赖 $blue，而非语义变量。
不建议直接修改 $theme-colors Map，除非你要新增色系（比如 purple），否则容易破坏内部映射逻辑。
编译输出的 CSS 文件没更新
即使 Sass 编译成功，生成的 CSS 文件也可能没变，原因往往不在代码本身：
- 构建工具（如 Webpack、Vite）缓存了上一次编译结果，没触发重新编译 —— 尝试删掉
dist或build目录再跑一次 - HTML 中引用的仍是旧版 CSS 文件（比如
bootstrap.css?v=1.0），浏览器加载了缓存版本 —— 清除缓存或加时间戳强制刷新 - 你改的是
_custom-variables.scss，但主入口 Sass 文件里漏写了@import "custom-variables"; - 编辑器保存失败或文件编码异常（比如 BOM 头），导致编译器读到空内容
最直接验证方式：打开编译后的 CSS 文件，搜索 --bs-primary 或 .btn-primary，看值是否已更新。别只信“编译完成”提示。
用了 CDN 或预编译 CSS，根本没走 Sass 编译流程
如果 HTML 中是这样引入的：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
那无论你怎么改本地 _variables.scss，都不会有任何效果 —— 你压根没参与编译过程。CDN 上的是官方预编译版本，变量早已固化。
要自定义变量，必须使用 Sass 源码方式引入，并走完整编译链。哪怕只是改一个 $border-radius，也得自己搭编译环境，不能绕过这一步。
真正卡住人的，往往不是“怎么写变量”，而是没意识到自己根本没进入变量生效的路径 —— 先确认你用的是源码还是成品包，比调十遍 $primary 都重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
