text-brand不生效是因为未正确扩展$utilities：必须在@import bootstrap utilities前用map-merge向$utilities注入结构正确的map，且需设置responsive: true、清缓存并重新编译sass。
为什么 text-brand 写了但不生效
因为 $utilities 没被正确扩展，Sass 编译器根本没收到“生成这个类”的指令。Bootstrap 5 的工具类不是写完 HTML 就能用的 CSS 名单，而是靠 $utilities 这个 Sass map 驱动编译产出的——你漏了它，就等于没下订单。
常见错误现象：text-primary-emphasis 能用，但自己加的 text-brand 在浏览器里查不到对应 CSS 规则；检查编译后的 CSS 文件，也完全搜不到 text-brand 字样。
- 必须在
@import "bootstrap/scss/utilities"之前，用map-merge($utilities, ...)扩展，不能直接赋值$utilities: (...)，否则清空全部默认类 - 确保你的自定义 SCSS 文件（如
_utilities.scss）被正确引入，且顺序在 Bootstrap 的utilities之前 - 改完后要清缓存、重新编译 Sass，纯刷新页面或改 HTML 不会触发新类生成
如何添加带响应式的 text-brand 类
目标是让 text-brand 输出 color: #2563eb，同时支持 text-sm-brand、text-md-brand 等断点变体。
关键不是写 CSS，是往 $utilities 里塞结构正确的 map：
$utilities: map-merge(
$utilities,
(
"text-brand": (
property: color,
values: (brand: #2563eb),
responsive: true,
print: false,
)
)
);
-
brand是 class 后缀名（最终生成text-brand），不是颜色名；#2563eb是实际值 -
responsive: true才会生成带断点的版本；设为false则只有基础版 - 推荐用变量替代硬编码，例如
brand: map-get($theme-colors, primary)，方便后续统一调整
为什么 class 生效了但压不过按钮文字颜色
写了 text-brand，结果按钮内文字还是灰色——不是类没生成，而是 CSS 权重不够。Bootstrap 5 默认所有 utility class 都带 !important，但你的自定义类默认不带。
解决方式有两种，选其一即可：
- 在 utility map 里加
rules: "color !important"，只对这个属性加!important，不影响其他规则 - 全局关掉 utility 的
!important：在覆盖$utilities前设置$enable-important-utilities: false，然后手动控制权重（比如加.btn .text-brand这类更具体的选择器）
别用 !important 全局强刷，容易埋下维护雷——特别是当第三方组件也依赖 !important 时，冲突会变得不可预测。
加载顺序和 map-deep-merge 的坑
直接用 map-merge 扩展 $utilities 有时仍会失效，比如加了 "opacity": () 却只出 opacity-25，没有 md:opacity-50。
这是因为 Bootstrap 内部在 utilities/_api.scss 中用了多层判断和 map-deep-merge（来自 functions/_maps.scss），简单 map-merge 会跳过这些逻辑。
- 复杂嵌套配置（如含
responsive+values+class多层结构）建议优先用map-deep-merge - 确认你的自定义文件导入顺序：Bootstrap 的
functions→ 你的变量覆盖 → Bootstrap 的variables→ Bootstrap 的utilities→ 你的_utilities.scss - 每次改完都检查编译输出的 CSS 文件，而不是只信浏览器开发者工具里的“已启用”样式
真正麻烦的从来不是语法，而是 Sass 编译链路中那一环没对上——顺序错、缓存没清、map 合并方式不对，三者任一出问题，text-brand 就只是 HTML 里一个安静的字符串。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
