How to enable bootstrap rtl in scss

Question

How to enable bootstrap rtl in scss

3.9k views Asked by Morteza Negahi At 12 April 2021 at 08:53

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>

Original Q&A

There are 2 answers

kindy ww On 15 September 2021 at 16:30

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

**Carol Skelly** · Accepted Answer · 2021-04-12 14:00:08

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

SASS source files
Compile using SASS generates standard LTR CSS (bootstrap.css) that contains comments with special RTLCSS directives
Post process bootstrap.css using RTLCSS module
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

TechQA.

How to enable bootstrap rtl in scss

There are 2 answers

Step 1

file package.json

Step 2

File config/postcss.config.js

Step 3

Step 4

output

Related Questions in TWITTER-BOOTSTRAP

Related Questions in SASS

Related Questions in BOOTSTRAP-5

Related Questions in RTLCSS

Related Questions in BOOTSTRAP-RTL

Popular Questions

Popular Tags

Trending Questions