编译Bootstrap 5时分页样式不一致，如何修复？

问题场景 #

编译Bootstrap 5源码后，分页组件的所有页码链接均带有圆角；但通过CDN引入Bootstrap 5时，仅首尾页码链接带有圆角，需要实现官方文档所示的首尾圆角样式。

问题原因 #

查看_pagination.scss的逻辑可知，样式分支由变量$pagination-margin-start的取值决定：

• 当$pagination-margin-start等于calc($pagination-border-width * -1)（Bootstrap默认值）时，仅为首尾页码链接添加圆角；
• 若该变量被修改为其他值，则会为所有页码链接添加圆角，这就是编译后样式不符的核心原因。

对应的源码片段：

.page-item {
  &:not(:first-child) .page-link {
    margin-left: $pagination-margin-start;
  }

  @if $pagination-margin-start == (calc($pagination-border-width * -1)) {
    &:first-child {
      .page-link {
        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
      }
    }

    &:last-child {
      .page-link {
        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
      }
    }
  } @else {
    // Add border-radius to all pageLinks in case they have left margin
    .page-link {
      @include border-radius(var(--#{$prefix}pagination-border-radius));
    }
  }
}

解决方案 #

方案1：恢复默认变量值 #

在引入Bootstrap分页组件的SCSS代码前，显式设置$pagination-margin-start为默认值，确保触发正确的样式分支：

// 先设置变量，再引入组件
$pagination-margin-start: calc($pagination-border-width * -1);
@import "bootstrap/scss/pagination";

方案2：强制重写首尾圆角样式 #

如果需要保留自定义的$pagination-margin-start值，同时实现首尾圆角效果，可以直接重写.page-item的样式逻辑：

.page-item {
  // 保留原有margin设置
  &:not(:first-child) .page-link {
    margin-left: $pagination-margin-start;
  }

  // 强制为首尾页码添加圆角
  &:first-child .page-link {
    @include border-start-radius(var(--#{$prefix}pagination-border-radius));
  }

  &:last-child .page-link {
    @include border-end-radius(var(--#{$prefix}pagination-border-radius));
  }

  // 移除所有页码的全局圆角
  .page-link {
    border-radius: 0;
  }
}

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