如何在 scss 中启用引导 rtl答案

【问题标题】：How to enable bootstrap rtl in scss如何在 scss 中启用引导 rtl
【发布时间】：2021-07-07 08:38:11
【问题描述】：

我根据此链接中的documents 进行编码。但我的代码在 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-bootstrap sass bootstrap-5 rtlcss bootstrap-rtl

【解决方案1】：

这里是简单的步骤，你可以查看 bootstrap package.json 必须修改文件以适合您的业务

Read File

步骤 1

文件 package.json

{
    "name": "app-name",
    "version": "1.0.0",
    "private": true,
    "dependencies": {},
    "scripts": {
        "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css src/scss/:asset/css/",
        "css-rtl": "cross-env NODE_ENV=RTL postcss --config config/postcss.config.js --dir \"asset/css\" --ext \".rtl.css\" \"asset/css/*.css\" \"!asset/css/*.min.css\" \"!asset/css/*.rtl.css\"",
        "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
        "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
        "css-prefix-main": "postcss --config config/postcss.config.js --replace \"asset/css/*.css\" \"!asset/css/*.rtl*.css\" \"!asset/css/*.min.css\"",
        "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
        "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output asset/css/ --batch --batch-suffix \".min\" \"asset/css/*.css\" \"!asset/css/*.min.css\" \"!asset/css/*rtl*.css\"",
        "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output asset/css/ --batch --batch-suffix \".min\" \"asset/css/*rtl.css\" \"!asset/css/*.min.css\""
    },
    "devDependencies": {
        "autoprefixer": "^10.2.6",
        "cross-env": "^7.0.3",
        "npm-run-all": "^4.1.5",
        "postcss": "^8.3.6",
        "postcss-cli": "^8.3.1",
        "rtlcss": "^3.3.0",
        "sass": "^1.41.0"
    },
    "files": [
        "asset/{css}/*.{css,map}",
        "src/scss/**/*.scss"
    ]
}

第二步

文件配置/postcss.config.js

Read Folder Bootstrap

"use strict";

module.exports = (ctx) => {
  return {
    plugins: {
      autoprefixer: {
        cascade: false,
      },
      rtlcss: ctx.env === "RTL" ? {} : false,
    },
  };
};

第三步

包安装

npm install

第四步

生产

npm run css

输出

app.css
app.css.map
app.min.css
app.min.css.map
app.rtl.css
app.rtl.css.map
app.rtl.min.css
app.rtl.min.css.map

【讨论】：

【解决方案2】：

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

带有值指令的 RTLCSS：

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

CSS 结果（用 RTLCSS 处理后）：

body {
  background: blue;
}

你可以试试这个RTLCSS playground

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

RTLCSS 也不同于使用dir="rtl"。只需使用“dir=rtl”tells the browser the "directionality of the element's text"。

Bootstrap 5 如何实现 RTL 支持

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

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

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

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

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

SASS：

$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;
}

Demo

【讨论】：

不生成任何 RTL css。在这里，我很困惑。 github.com/twbs/bootstrap/issues/32385#issuecomment-987742939
我不太明白这个评论。 RTLCSS 是一个 CSS 处理器。它独立于 Bootstrap getbootstrap.com/docs/5.1/getting-started/rtl/#approach