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

Question

我正在使用 bootstrap5 scss。

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

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

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

Answer 1

更新的答案：

我认为文档中缺少的是，如果您要导入 scss 版本，那么您需要安装并配置 postcss。并且你还需要一个 rtl 插件。我使用postcss-rtlcss取得了成功。

所以只需安装 postcss 和 postcss-rtlcss ：

npm i -D postcss postcss-rtlcss

然后在您的项目根目录（或者如果您使用nx，则在应用程序目录中）添加以下配置文件postcss.config.js：

module.exports = {
  plugins: ['postcss-rtlcss']
};

现在您只需运行您的项目并且 RTL 应该可以完美运行！

导入普通引导程序并使用 RTL 选择器导入 RTL：

@import '~bootstrap/scss/bootstrap';

[dir='rtl'] {
  @import '~bootstrap/dist/css/bootstrap-utilities.rtl.min';
}

注意：如果导入，bootstrap.rtl.min它将覆盖您的颜色变量（因为它是已编译的 CSS，其值已烘焙）

注意#2：我仍然不认为这就是 bootstrap 打算如何使用 rtl 的。因为现在如果你me-2在 ltr 中有一个元素，它的右侧将有 2 个边距，但在 rtl 中，它将在左右都有边距！因为rtl代码只是添加了rtl并且没有更改rtl指令。

理想情况下，我们会有一个完整版本的 rtl bootstrap 但在 SCSS 中，这将解决我们的大部分问题。一旦我发现更多信息，我会立即更新这个答案。

我发现只需导入即可满足utilities我的大部分 RTL 需求。我认为您可以导入您认为合适的其他文件，只需记住最重要的内容即可。