使用media-breakpoint-down未生成CSS类：编译正常但类缺失

使用media-breakpoint-up的SCSS代码能正常生成对应断点的.text-truncate类：

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @include media-breakpoint-up($breakpoint) {
        .text-truncate#{$infix} {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

但将media-breakpoint-up替换为media-breakpoint-down后，代码编译无报错，却无法生成预期的.text-truncate断点类：

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @include media-breakpoint-down($breakpoint) {
        .text-truncate#{$infix} {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

原因分析 #

核心问题出在breakpoint-infix()函数的默认行为：

• 该函数处理Bootstrap最小断点（如xs）时，会返回空字符串，导致生成的类名为.text-truncate，和Bootstrap自带的全局.text-truncate类重名，编译时自定义代码被默认样式覆盖，看起来像是没生成。
• 对于非最小断点（如sm、md），类其实已经生成，但可能因为你没检查编译后的CSS，或者原代码缺少white-space: nowrap（text-overflow: ellipsis生效的必要条件），导致误以为没生成。

解决办法 #

1. 修改infix逻辑，避免类名冲突
   给最小断点强制添加-xs后缀，防止和全局类重名：

@each $breakpoint in map-keys($grid-breakpoints) {
    // 为最小断点单独设置infix，其余用默认逻辑
    $infix: if($breakpoint == map-key-first($grid-breakpoints), "-xs", breakpoint-infix($breakpoint, $grid-breakpoints));
    @include media-breakpoint-down($breakpoint) {
        .text-truncate#{$infix} {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; // 必须添加，否则省略号不生效
        }
    }
}

2. 验证编译结果
   直接查看编译后的CSS文件，搜索.text-truncate-开头的类，确认是否存在于对应的max-width媒体查询中。

3. 补全必要属性
   务必添加white-space: nowrap;，这是文本省略效果生效的核心前提，缺少它即使类生成了也看不到预期效果。

内容的提问来源于stack exchange，提问作者manuxi