如何在 scss 中启用 bootstrap rtl

本文介绍了如何在 scss 中启用 bootstrap rtl的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I coded based on the documents in this link. But my code doesn't work in SCSS.

这是我的 main.scss.

this is my 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>

推荐答案

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

It may not be clear in the Bootstrap 5 docs, but RTLCSS is a JS module that is used compile special RTLCSS formatted CSS to CSS. For example,

带有值指令的 RTLCSS:

RTLCSS with value directive:

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

CSS 结果(使用 RTLCSS 处理后):

body {
  background: blue;
}

您可以在这个 RTLCSS 游乐场

浏览器不懂RTLCSS，他们只懂CSS

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

RTLCSS is also different than using dir="rtl". Using "dir=rtl" simply tells the browser the "directionality of the element's text".

Bootstrap 5 如何实现 RTL 支持

查看Bootstrap 5 编译的 CSS 文件你将看到现在有一个 bootstrap.rtl.min.css 文件.Bootstrap 使用 RTLCSS 来处理/编译 SASS 生成的 LTR CSS.下面是 bootstrap.rtl.(min.)css 文件是如何由 Bootstrap 生成的...

Looking at Bootstrap 5 compiled CSS files you'll see there is now a bootstrap.rtl.min.css file. Bootstrap is using RTLCSS to process/compile the SASS generated LTR CSS. Here's how the bootstrap.rtl.(min.)css files are generated by Bootstrap...

SASS 源文件
使用 SASS 编译生成标准 LTR CSS (bootstrap.css)，其中包含带有特殊 RTLCSS 指令的注释
使用 RTLCSS 模块对 bootstrap.css 进行后期处理
Result 是 bootstrap.rtl.css，其中包含重新定位组件(如面包屑、下拉菜单、轮播等)的 CSS 规则，以支持 RTL.生成的 bootstrap.rtl.css 也反转了start"的方向.和结束"用于填充、边距、浮动等...

SASS source files
Compile using SASS generates standard LTR CSS (bootstrap.css) that contains comments with special RTLCSS directives
Post process bootstrap.css using RTLCSS module
Result is bootstrap.rtl.css which contains CSS rules that re-orient components like breadcrumbs, dropdowns, carousel, etc... for RTL support. The generated bootstrap.rtl.css also reverses the direction of "start" and "end" for padding, margins, floats, etc...

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

So the build process is basically...

SASS 文件 >用SASS编译 >boostrap.css(在注释中包含特殊的 RTLCSS 指令)>使用 RTLCSS 编译 >boostrap.rtl.css

SASS files > compile with SASS > boostrap.css (contains special RTLCSS directives in comments) > compile with RTLCSS > boostrap.rtl.css

你可以见这里，您可以使用 SASS 来更改生成的 CSS，但生成的 CSS 仍需要使用 RTLCSS 进行后期处理，以便生成可在浏览器中使用的 CSS 规则...

As you can see here, you can use SASS to change the generated CSS, but that generated CSS would still need to be post processed using RTLCSS in order to generate CSS rules that will work in the browser...

SASS:

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

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

Which would output to the following for our default CSS and 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 规则..

Therefore, you need to post process using RTLCSS to get what you expect in compiled.css. If you didn't want to use RTLCSS like Bootstrap does, you could simply add CSS rules with the dir=rtl selectors..

body {
    background-color: red;
}

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

演示

这篇关于如何在 scss 中启用 bootstrap rtl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！