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

Posted 2023-03-06

【中文标题】如何在项目中同时使用 rtl 和 ltr bootstrap 5 sass 样式？

【英文标题】：How to use both rtl and ltr bootstrap 5 sass styles in a project?

【发布时间】：2021-10-22 06:51:26

【问题描述】：

我正在使用 bootstrap5 scss。

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

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

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

【参考方案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.