时间戳

首页 > 解决方案 > 如何在 scss 中启用引导 rtl

twitter-bootstrap - 如何在 scss 中启用引导 rtl

问题描述

我根据此链接中的文档进行编码。但是我的代码在 SCSS 中不起作用。

这是我的 main.scss。

@import "node_modules/bootstrap/scss/bootstrap";

body {
  background: red #{"/* rtl:blue */"};
}

这是我的html

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="compiled.css">
  <title>Test</title>
</head>
<body>
<h1>Test Test Test</h1>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>

标签： twitter-bootstrapsassbootstrap-5rtlcssbootstrap-rtl

解决方案

在 Bootstrap 5 文档中可能不清楚，但RTLCSS是一个 JS 模块，用于将特殊的 RTLCSS 格式的 CSS编译为CSS。例如，

带有值指令的 RTLCSS：

body {
  background: red /*rtl:blue*/;
}

CSS 结果（使用 RTLCSS 处理后）：

body {
  background: blue;
}

你可以在这个RTLCSS 操场上试试这个

浏览器不理解 RTLCSS，他们只理解 CSS

RTLCSS 也不同于使用dir="rtl". 使用“dir=rtl”只是告诉浏览器“元素文本的方向性”。

Bootstrap 5 如何实现 RTL 支持

查看Bootstrap 5 编译的 CSS 文件，您会看到现在有一​​个bootstrap.rtl.min.css文件。Bootstrap 使用 RTLCSS 处理/编译 SASS 生成的 LTR CSS。以下bootstrap.rtl.(min.)css是 Bootstrap 生成文件的方式...

  1. SASS 源文件
  2. 使用 SASS 编译会生成标准 LTR CSS ( bootstrap.css)，其中包含带有特殊 RTLCSS 指令的注释
  3. bootstrap.css使用 RTLCSS 模块进行后期处理
  4. 结果是bootstrap.rtl.css其中包含重新定位组件（如面包屑、下拉菜单、轮播等）的 CSS 规则，以支持 RTL。生成的bootstrap.rtl.css还反转填充、边距、浮动等的“开始”和“结束”方向......

所以构建过程基本上是......

SASS files> compile with SASS> boostrap.css（在注释中包含特殊的 RTLCSS 指令） > compile with RTLCSS>boostrap.rtl.css

正如您在此处看到的，您可以使用 SASS 更改生成的 CSS，但生成的 CSS 仍需要使用 RTLCSS 进行后处理，以便生成可在浏览器中运行的 CSS 规则...

萨斯：

$font-weight-bold: 700 #{/* rtl:600 */} !default;

对于我们的默认 CSS 和 RTL CSS，它将输出到以下内容：

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

因此，您需要使用 RTLCSS 进行后期处理，以获得您期望的compiled.css. 如果您不想像 Bootstrap 那样使用 RTLCSS，您可以简单地使用dir=rtl选择器添加 CSS 规则。

body {
    background-color: red;
}

body[dir='rtl'] {
    direction: rtl;
    background-color: blue;
}

演示

推荐阅读