自定义 utility class 默认不带 !important，导致如 text-brand 无效；需在 $utilities map 中为对应条目显式设置 rules: "color !important"，而非依赖全局变量或手写 css。
自定义 utility class 默认不带 !important，这是最常被忽略的根源
写了 text-brand 却没生效？不是 Sass 没编译，也不是 HTML 写错了，而是 Bootstrap 5 默认只给内置工具类（如 text-primary、mb-3）加 !important，你新加的 utility 完全没这待遇。浏览器按特异性+声明顺序比权重，你的类和 .btn .text 碰上，大概率直接输。
关键点在于：$utilities map 里每个条目控制的是「生成什么 CSS」，而 !important 是其中 rules 键决定的，不是全局开关。
- 默认所有内置 utility 的
rules值类似"color !important"或"margin-bottom !important" - 你新增时若只写
property: color, values: (brand: #2563eb)，生成的就是普通color: #2563eb - 要对齐行为，必须显式写
rules: "color !important"
两种改法：单个类加 important 还是全局关掉
别一上来就改 $enable-important-utilities —— 这个变量只影响后续新增的 utility，对已存在的（比如 fw-bold）无效，且一旦关掉，所有新工具类都得手动补 !important，容易漏。
更稳妥的做法是按需控制：
- 只给特定 utility 加：在
map-merge里为该条目加rules: "color !important" - 想统一风格、彻底摆脱
!important：在@import "bootstrap/scss/utilities"前设$enable-important-utilities: false，然后所有自定义 utility 都必须自己写rules - 注意：设
$enable-important-utilities: false不会删掉 Bootstrap 自带的!important，它只管「接下来新生成的 utility」是否默认带
为什么直接在 CSS 里写 .text-brand { color: #2563eb !important } 是下策
这不是不能用，而是破坏了 utility 的设计意图——它本该是原子化、可组合、与响应式断点自动对齐的。手写 CSS 会丢掉 text-sm-brand、text-md-brand 这些变体，还得自己处理 @media。
更重要的是，这种写法绕过了 $utilities 的配置层，后续想批量换色、导出主题变量、或交给设计师配置，就完全断链了。
- 调试阶段可用：
.text-brand { color: #2563eb !important }快速验证颜色值 - 上线前必须删掉，换成 Sass 层的
rules: "color !important"配置 - 否则响应式类（如
text-lg-brand）永远不存在，维护成本指数上升
加载顺序和缓存问题让修改看似“不生效”
改完 $utilities，重新编译 Sass，但页面还是旧样式？八成是缓存或加载顺序错了。
- Sass 入口文件中，
$utilities的map-merge必须出现在@import "bootstrap/scss/utilities"之前，顺序反了等于白写 - Webpack/Vite 等构建工具常缓存 Sass 变量，改完记得清构建缓存（比如删
node_modules/.cache或重启 dev server） - 检查最终生成的 CSS 文件里有没有
.text-brand，没有说明 Sass 根本没读到你的map-merge
真正难的从来不是加 !important，而是让这个 !important 出现在正确的位置、正确的时机、并能随项目演进持续可控。
