Bootstrap v4升级v5后border-bottom-right-radius混入报错如何解决

Bootstrap v5 移除了 v4 版本内置的单角圆角 Sass 混入（mixin），border-bottom-right-radius、border-bottom-left-radius这类单独控制单个圆角的mixin在v5版本中不存在，因此sass-loader编译到对应@include语句时，会因找不到mixin定义抛出编译错误。

任选以下一种方案修改代码即可解决报错：

• 直接替换为原生CSS属性（推荐，改造成本最低）
  将原代码中的@include border-bottom-right-radius(0);替换为原生CSS写法：

  border-bottom-right-radius: 0;
  

  后续如果需要启用注释掉的左下圆角逻辑，同理将对应mixin替换为border-bottom-left-radius: 0;即可。
• 调用Bootstrap v5保留的通用border-radius混入实现
  v5版本保留的border-radius混入支持指定圆角位置参数，右下圆角对应写法为：

  @include border-radius(0, "bottom-right");
  

  其余单角位置参数对应关系：
  • 左上圆角："top-left"
  • 右上圆角："top-right"
  • 左下圆角："bottom-left"
• 全局补全兼容mixin（适合旧代码调用点极多的场景）
  如果项目中大量使用v4版本的单圆角mixin，逐行修改成本太高，可以在全局scss入口添加以下兼容mixin定义：

  @mixin border-top-left-radius($radius) {
    border-top-left-radius: $radius;
  }
  @mixin border-top-right-radius($radius) {
    border-top-right-radius: $radius;
  }
  @mixin border-bottom-left-radius($radius) {
    border-bottom-left-radius: $radius;
  }
  @mixin border-bottom-right-radius($radius) {
    border-bottom-right-radius: $radius;
  }
  

  注意：这段兼容代码必须放在所有业务样式导入语句之前加载，否则编译时依然会找不到mixin定义。 全局注册后原有旧代码不需要任何修改即可正常编译。

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