必须在@import "bootstrap/scss/variables"前重定义$primary等变量，否则因sass变量首次声明生效规则而被静默忽略；正确顺序为先定义（推荐加!default）、再依次导入functions、variables和bootstrap。
编译前必须确认变量覆盖时机是否正确
改了 $primary 却还是蓝色？大概率是变量写在了 @import "bootstrap/scss/bootstrap" 之后。Sass 变量只在首次声明时生效，后续赋值会被静默忽略。真正起作用的顺序只能是：
- 先定义变量（推荐加
!default，比如$primary: #dc2626 !default;） - 再依次
@import "bootstrap/scss/functions"、@import "bootstrap/scss/variables"、@import "bootstrap/scss/bootstrap" - 确保你的入口 SCSS 文件（如
custom.scss）是你构建流程中实际编译的那个，而不是直接引用bootstrap.min.css
漏掉 functions 会导致编译报错 Undefined variable: "$font-size-base"；顺序颠倒会让 $primary-rgb 这类衍生变量仍用默认值。
自定义间距类必须改 $spacers 而非手写 CSS
想加 mt-6 却发现 mt-lg-6 不生效？别手动写 .mt-6 { margin-top: 4rem; }。Bootstrap 5+ 的所有间距工具类（pt-3、px-lg-5 等）完全由 $spacers 这个 map 驱动。你改它，响应式变体自动跟上。
- 用
map-merge扩展，保留原有层级：$spacers: map-merge($spacers, (6: 4rem, 7: 6rem)); - 必须在
@import "bootstrap/scss/utilities/spacing"之前完成覆盖，否则工具类按原始$spacers编译 - 检查最终 CSS 是否包含类似
.pt-lg-6 { padding-top: 4rem; }—— 没有就说明变量没被消费到
新增工具类（如 text-brand）必须注入 $utilities map
HTML 里写了 class="text-brand" 却没任何样式？不是 class 拼错了，是 Sass 根本没生成这条规则。Bootstrap 5 的工具类不是预设列表，而是由 $utilities 这个 map 驱动生成的。
- 必须用
map-merge向$utilities注入新条目，含class、property、values、responsive等字段 - 例如：
text-brand对应的条目里class值必须是"text-brand"，不能只改 HTML 就指望它生效 - 常见失败原因：未触发重新编译、入口
@import顺序错误、浏览器缓存、或缺失!important权重导致被覆盖
CLI 或构建工具中路径和缓存最容易出问题
运行 sass main.scss dist/main.css 报错 No output path specified？这是最典型的 CLI 使用错误。Bootstrap 的 Sass 文件不能单独编译，_variables.scss 这类 partial 文件名以 _ 开头，只能被 @import 引入。
- CLI 编译需显式指定输入输出：
sass src/custom.scss dist/custom.css --source-map - Webpack +
sass-loader下，确保includePaths包含node_modules，然后用@import "bootstrap/scss/bootstrap";（不要用~bootstrap，路径解析易错位） - Vite 等现代工具常启用 CSS 预处理器缓存，改了变量后没生效，先清构建缓存或关掉
css.preprocessorOptions.sass.cache
真正卡住的地方往往不是 Sass 写法，而是变量定义了但没被实际消费，或者 CSS 输出路径没刷新——编译链路里任何一个环节断开，都会让自定义失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
