How to enable bootstrap rtl in scss

3.9k views Asked by At

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/[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>
2

There are 2 answers

2
Carol Skelly On BEST ANSWER

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

0
kindy ww On

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