Twitter bootstrap 如何在scss中启用引导rtl_Twitter Bootstrap_Sass_Bootstrap 5_Rtlcss_Bootstrap Rtl

Twitter bootstrap 如何在scss中启用引导rtl

twitter-bootstrap sass

Twitter bootstrap 如何在scss中启用引导rtl,twitter-bootstrap,sass,bootstrap-5,rtlcss,bootstrap-rtl,Twitter Bootstrap,Sass,Bootstrap 5,Rtlcss,Bootstrap Rtl,我根据这个链接中的代码进行编码。但是我的代码在SCSS中不起作用这是我的主要.scss @import "node_modules/bootstrap/scss/bootstrap"; body { background: red #{"/* rtl:blue */"}; } 这是我的html <!doctype html> <html lang="ar" dir="rtl"> &l

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

这是我的主要.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>


试验
测试

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

带值指令的RTLCS：

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

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

你可以试试这个

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

RTLCSS也不同于使用

dir=“rtl”

。简单地使用“dir=rtl”

Bootstrap 5如何实现RTL支持

现在，您将看到一个

bootstrap.rtl.min.css

文件。Bootstrap使用RTLCS处理/编译SASS生成的LTR CSS。以下是引导程序如何生成

bootstrap.rtl.（min.）css

文件

SASS源文件

使用SASS编译生成标准的LTR CSS（

bootstrap.CSS

），其中包含带有特殊RTLCSS指令的注释

使用RTLCSS模块后处理

bootstrap.css

结果是

bootstrap.rtl.css

，它包含css规则，可以重新定位组件，如面包屑、下拉列表、旋转木马等。。。用于RTL支持。生成的

bootstrap.rtl.css

还反转了填充、边距、浮动等的“开始”和“结束”方向

所以构建过程基本上是

SASS文件

使用SASS编译

boostrap.css

（注释中包含特殊的RTLCSS指令）>

使用RTLCSS编译

boostrap.rtl.css

正如您所能做的，您可以使用SASS来更改生成的CSS，但是生成的CSS仍然需要使用RTLCSS进行后处理，以便生成在浏览器中工作的CSS规则

SASS：

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

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

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

因此，您需要使用RTLCSS进行后期处理，以获得您在

compiled.css

中所期望的内容。如果您不想像Bootstrap那样使用rtlcs，您可以简单地使用

dir=rtl

选择器添加CSS规则

body {
    background-color: red;
}

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

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

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

body {
    background-color: red;
}

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