Bootstrap 5：如何在Sass文件中导入RTL SCSS及修复样式异常

1. 替换Bootstrap核心导入文件 #

直接把原有导入语句换成RTL版本即可，bootstrap.rtl.scss已经包含了所有核心变量、mixin和样式规则，完全兼容你原本使用的@include media-breakpoint-up()或@extend语法：

// 替换前
@import "~bootstrap/scss/bootstrap";
// 替换后
@import "~bootstrap/scss/bootstrap.rtl";

2. 修复border-radius样式异常问题 #

你遇到的border-radius显示错误，大概率是样式加载顺序或RTL变量未正确生效导致的，按以下方式调整：

• 确保自定义Sass代码写在bootstrap.rtl.scss导入之后，让自定义样式能正确继承RTL规则
• 若需要覆盖RTL相关变量，要把变量定义放在导入RTL文件之前，示例：

// 先定义自定义变量（可选）
$border-radius: 0.5rem;
$direction: rtl; // 显式指定方向，确保RTL规则全量生效

// 再导入RTL核心文件
@import "~bootstrap/scss/bootstrap.rtl";

// 最后编写自定义样式
.newsletter {
    @extend .input-group, .shadow;
    @include media-breakpoint-up(md) {
        margin: 0 1rem;
    }
}

3. 保留HTML基础配置 #

你的HTML结构已经正确设置了RTL属性，保持即可：

<html lang='fa' dir='rtl'>
...
</html>

关键说明 #

• bootstrap.rtl.scss内部已自动处理RTL方向的样式翻转（包括border-radius、内外边距方向、浮动对齐等），无需额外编写翻转逻辑
• 原本使用的所有Bootstrap Sass工具（mixin、extend、变量）都能正常使用，不需要修改语法

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