5

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

this is my main.scss.

@import "node_modules/bootstrap/scss/bootstrap";

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

and this is my 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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Morteza Negahi
  • 3,305
  • 8
  • 24
  • 42

2 Answers2

9

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 with value directive:

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

CSS result (after processing with RTLCSS):

body {
  background: blue;
}

You can try this on this RTLCSS playground

Browsers don't understand the RTLCSS, they only understand CSS

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

How Bootstrap 5 implements RTL support

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...

  1. SASS source files
  2. Compile using SASS generates standard LTR CSS (bootstrap.css) that contains comments with special RTLCSS directives
  3. Post process bootstrap.css using RTLCSS module
  4. 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 files > compile with SASS > boostrap.css (contains special RTLCSS directives in comments) > compile with RTLCSS > boostrap.rtl.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;

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

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

Demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • does not generate any RTL css. Here, I am confused. https://github.com/twbs/bootstrap/issues/32385#issuecomment-987742939 – HDP Dec 07 '21 at 09:46
  • I don't really understand the comment. RTLCSS is a CSS processor.. it's separate from Bootstrap https://getbootstrap.com/docs/5.1/getting-started/rtl/#approach – Carol Skelly Dec 07 '21 at 14:02
1

Here are simple steps, you can check bootstrap package.json Files must be modified to suit your business

Read File

Step 1

file 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"
    ]
}

Step 2

File config/postcss.config.js

Read Folder Bootstrap

"use strict";

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

Step 3

packages installation

npm install

Step 4

production

npm run css

output

  • 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
kindy ww
  • 9
  • 2