Bootstrap 5 Sass项目无法添加浏览器前缀的原因及解决方法

我正在基于Laravel 8和Bootstrap 5 SASS开发项目。
我使用Laravel Mix编译所有SCSS文件——包括Bootstrap及自定义样式——为单个CSS文件。

但我惊讶地发现，使用border-radius混合宏时，编译后的CSS未添加浏览器前缀。

例如：

.some-class {
    @include border-radius(50%);
}

编译结果为：

.some-class {
    border-radius: 50%;
}

而非预期的：

.some-class {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

为解决该问题，我添加了自定义混合宏：

@mixin border-radius($top-left:$border-radius, $top-right:null, $bottom-right:null, $bottom-left:null){
  -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left;
     -moz-border-radius: $top-left $top-right $bottom-right $bottom-left;
      -ms-border-radius: $top-left $top-right $bottom-right $bottom-left;
          border-radius: $top-left $top-right $bottom-right $bottom-left;  
}

核心问题 #

我始终无法理解为何仍无法添加浏览器前缀。

疑问 #

1. 该问题的成因是什么？
2. 实现预期效果最可靠的方法是什么？

1. 问题成因 #

• Bootstrap 5的设计变更：Bootstrap 5彻底移除了旧浏览器前缀生成逻辑，因为它放弃了对IE11及更早版本的支持，而现代主流浏览器早已原生支持标准border-radius属性，无需前缀。
• 自定义混合宏优先级不足：如果你的自定义border-radius混合宏是在引入Bootstrap SCSS之前定义的，Bootstrap自带的同名混合宏会覆盖你的版本，编译时仍使用无前缀实现。
• Laravel Mix的Autoprefixer配置：Laravel Mix默认集成的Autoprefixer会根据预设的目标浏览器列表决定是否添加前缀。默认配置针对较新版本浏览器，不需要border-radius前缀，因此不会自动补充。

2. 最可靠的实现方法 #

如果确实需要支持依赖前缀的旧版本浏览器，推荐以下方案：

• 配置Autoprefixer目标浏览器：在项目根目录的package.json中添加browserslist字段，指定需要支持的旧浏览器，示例：

  "browserslist": [
    "last 2 versions",
    "IE 10",
    "Firefox ESR"
  ]
  

  配置后Autoprefixer会自动检测编译后的CSS属性，为符合目标浏览器要求的属性添加对应前缀，无需手动编写混合宏，这是最规范且维护成本最低的方式。
• 调整自定义混合宏加载顺序：如果坚持使用自定义混合宏，需在引入Bootstrap SCSS之后再定义你的border-radius混合宏，确保覆盖Bootstrap版本。不过这种方式需要手动维护所有需前缀的属性，灵活性远低于Autoprefixer。

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