3

我根据此链接中的文档进行编码。但是我的代码在 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>
4

2 回答 2

4

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

演示

于 2021-04-12T14:00:08.913 回答
0

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

读取文件

第1步

文件包.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步

文件配置/postcss.config.js

读取文件夹引导程序

"use strict";

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

第 3 步

包安装

npm install

第4步

生产

npm run css

输出

  • 应用程序.css
  • 应用程序.css.map
  • app.min.css
  • app.min.css.map
  • 应用程序.rtl.css
  • app.rtl.css.map
  • 应用程序.rtl.min.css
  • app.rtl.min.css.map
于 2021-09-15T16:30:51.937 回答