必须用map-merge()增量添加，不能直接赋值$utilities:()，否则清空所有默认工具类；需在@import "bootstrap/scss/functions"后、@import "bootstrap/scss/utilities"前覆盖，并确保每个utility含property、values、class三要素。
如何在 Sass 中安全覆盖 $utilities
直接赋值 $utilities: () 会清空所有默认工具类，必须用 map-merge() 增量添加。它不是“写完就生效”的配置，而是 Sass 编译时的生成指令——没进 map，就不会产出 CSS 类。
- 覆盖时机必须在
@import "bootstrap/scss/utilities"之前，且要在@import "bootstrap/scss/functions"之后（否则map-merge不可用） - 每个新 utility 至少要定义
property、values、class三个 key；responsive: true才会生成text-sm-brand这类断点变体 -
values支持 map，例如(brand: #2563eb, primary: map-get($theme-colors, primary))，避免硬编码 - 若想让自定义类也带
!important（比如压过组件内联样式），得加rules: "color !important"，而不是给整个 class 加
为什么 text-brand 写了但不生效
常见现象是 HTML 里写了 class="text-brand"，开发者工具里却查不到对应 CSS 规则——根本原因不是选择器写错，而是 Sass 根本没编译出这个类。
- 检查是否漏了
map-merge()，直接$utilities: ()赋值会导致全部默认 utility 消失 - 确认
@import顺序：你的自定义变量文件 →functions→variables→utilities，错一个环节就失效 - 浏览器加载的是你本地编译的 CSS，不是 CDN 上的
bootstrap.min.css；构建工具（Vite/Webpack）改了 Sass 文件后需重启 dev server - 如果用了
$enable-important-utilities: false全局关掉了!important，而你的自定义项又没显式加rules，那它连权重都赢不过.btn span这类组合选择器
$spacers 和 $border-radius 这类基础变量怎么改才同步生效
它们和 $utilities 不同，不控制“生成哪些类”，而是直接作为值源被多个地方引用。改对了，m-3、rounded-2、card 边框、btn 圆角全都会变。
-
$spacers必须保持 key 名一致：(0: 0, 1: .125rem, 2: .25rem, ...)，删掉某个 key 或改名会导致p-2类完全消失 -
$border-radius是数值变量（如.375rem），不是 map；改它会影响所有用border-radius: $border-radius的组件，包括.btn、.dropdown-menu - 如果项目没接入 Sass，可用
:root { --bs-border-radius: .5rem; }替代，但仅对 Bootstrap 5.3+ 中明确使用该变量的组件有效 - 不要用
!important单独覆盖.rounded类——它会和.rounded-pill冲突，且破坏 utility 的层级设计逻辑
自定义颜色类（如 text-brand）和主题色变量（$theme-colors）的关系
二者能共存，但职责不同：$theme-colors 控制 .btn-brand、.alert-brand 等组件类；$utilities 控制 text-brand、bg-brand 等原子类。想让两者一致，得分别配置。
- 往
$theme-colors加"brand": #2563eb，.btn-brand才会出现，且自动获得text-brand工具类（前提是$utilities里也配了text-brand） -
$theme-colors必须用map-merge()增量更新，否则会丢掉warning、info等原有颜色，导致.alert-warning失效 - 如果你新增了
"brand"，又希望.card-brand之类扩展组件也能响应，就得手动在自定义组件里调用theme-color("brand")，Bootstrap 不会自动绑定 - 颜色值推荐用十六进制或
rgb()，别用命名色（如red），Sass 编译可能报 warning
真正容易被忽略的是：所有这些变量修改都依赖构建工具正确解析 Sass 导入链。哪怕只有一处 @import 顺序错位，或者缓存没清，结果都是“改了等于没改”——它不会报错，只会静默回退到默认值。
