Search code examples
twitter-bootstrapsassbootstrap-5rtlcssbootstrap-rtl

How to enable bootstrap rtl in scss

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

  • 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