如何在项目中同时使用 rtl 和 ltr bootstrap 5 sass 样式？答案

【问题标题】：How to use both rtl and ltr bootstrap 5 sass styles in a project?如何在项目中同时使用 rtl 和 ltr bootstrap 5 sass 样式？
【发布时间】：2021-10-22 06:51:26
【问题描述】：

我正在使用 bootstrap5 scss。

我将 ltr 的样式作为标准包含：@import "~ bootstrap / scss / bootstrap";

问题：如何连接或启用rtl bootstrap 5 scss 样式？

从说明中看，除了如何通过链接以标准方式连接外，没有什么清楚的，但在scss中是必需的。

【问题讨论】：

标签： twitter-bootstrap sass

【解决方案1】：

您不应该在同一页面中同时使用这两个 CSS 文件 as mentioned in our docs。您可以查看我们的入门模板在该页面中，使用单个 CSS 文件。

如果您同时需要 RTL 和 LTR，则需要 use Sass and tweak your build a bit。但是我们的官方版本（因此发布可通过 CDN 获得）不能同时在两个方向上工作页面。

我们计划添加一个示例模板，其中包含一些双向内容 #32330 — 但还没有完成。我关闭了这个问题，因为它有效符合预期。

我们很高兴收到您需要帮助的任何见解或建议不过，我们改进了我们的文档或模板示例。 :)

编辑：我看到您共享的代码并未反映您提供的 CodePen。请使用您的代码更新您的 CodePen 如果您需要任何支持，请尝试。

这是GitHub issue的回答。

【讨论】：

那些。目前没有这种可能...

【解决方案2】：

重要信息：我从official Bootstrap docs复制了这一部分：

同时进行 LTR 和 RTL

在同一页面上需要 LTR 和 RTL？感谢RTLCSS String Maps，这非常简单。用一个类包装你的 @imports，并为 RTLCSS 设置自定义重命名规则：

/* rtl:begin:options: {
    "autoRename": true,
    "stringMap":[ {
        "name": "ltr-rtl",
        "priority": 100,
        "search": ["ltr"],
        "replace": ["rtl"],
        "options": {
            "scope": "*",
            "ignoreCase": false
        }
    } ]
} */
.ltr {
    @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

边缘情况和已知限制可以理解，请注意以下几点：

切换 .ltr 和 .rtl 时，请确保添加 dir 和 lang 相应的属性。加载两个文件可以是真正的表现瓶颈：考虑一些optimization，也许尝试load one of those files asynchronously。以这种方式嵌套样式将阻止我们 form-validation-state() mixin 无法按预期工作，因此需要你自己稍微调整一下。 See #31223.

【讨论】：