如何在 scss 中启用 bootstrap rtl

Question

我根据link中的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>

Answer 1

可能在Bootstrap 5 docs中没有说清楚，但是RTLCSS是一个JS模块，用于编译special 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".

Bootstrap5 如何实现 RTL 支持

查看 Bootstrap 5 compiled CSS files，您会看到现在有一个 bootstrap.rtl.min.css 文件。 Bootstrap 正在使用 RTLCSS 到 process/compile SASS 生成的 LTR CSS。 bootstrap.rtl.(min.)css 文件是如何由 Bootstrap...

生成的

SASS 源文件
使用 SASS 编译生成标准 LTR CSS (bootstrap.css)，其中包含带有特殊 RTLCSS 指令的注释
Post 使用 RTLCSS 模块

bootstrap.css

结果是 bootstrap.rtl.css，其中包含 CSS 重新定向组件（例如面包屑、下拉菜单、旋转木马等）的规则...以支持 RTL。生成的 bootstrap.rtl.css 还反转了填充、边距、浮动等的“开始”和“结束”的方向...

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

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

你可以see here，你可以使用SASS来改变生成的CSS，但是生成的CSS仍然需要是post使用 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;
}

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

body {
    background-color: red;
}

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

Demo

Answer 2

这里是简单的步骤，大家可以查看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"
    ]
}

第 2 步

文件config/postcss.config.js

Read Folder Bootstrap

"use strict";

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

步骤 3

软件包安装

npm install

第 4 步

制作

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

如何在 scss 中启用 bootstrap rtl

How to enable bootstrap rtl in scss

twitter-bootstrap

sass

bootstrap-5

rtlcss

bootstrap-rtl