How to use both rtl and ltr bootstrap 5 sass styles in a project?

Question

I'm using bootstrap5 scss.

I include styles for ltr as standard: @import "~ bootstrap / scss / bootstrap";

Question: how to connect or enable rtl bootstrap 5 scss styles?

From the instructions, nothing is clear, except how to connect via link in the standard way, but it is necessary in scss.

Answer 1

Updated answer:

What I think is missing from the documents is the fact that if you are importing the scss version, then you need to have postcss installed and configured. AND you also need an rtl plugin. I had success with postcss-rtlcss.

So just install postcss & postcss-rtlcss:

npm i -D postcss postcss-rtlcss

Then in your project root (or in the app dir if you are using nx) add this config file named postcss.config.js:

module.exports = {
  plugins: ['postcss-rtlcss']
};

And now you just run your project and should have rtl working perfectly!

Old answer (don't use, not that great):

Import normal bootstrap & import rtl with an rtl selector:

@import '~bootstrap/scss/bootstrap';

[dir='rtl'] {
  @import '~bootstrap/dist/css/bootstrap-utilities.rtl.min';
}

NOTE: If you import bootstrap.rtl.min it will override your color variables (beacuse it's the compiled css with the values already baked)

NOTE#2: I still don't think this is how bootstrap intended rtl to be used. because right now if you have me-2 on an element in ltr it will have 2 margin on the right but in rtl it will have margins on both right and left ! as the rtl code just added the rtl and didn't change the rtl instruction.

Idealy we would have a full version of rtl bootstrap BUT in SCSS which would fix most of our problems. I will update this answer as soon as I find out more.

I found that just importing utilities handles most of my rtl needs. I think you can import other files as you see fit just keep the overriding in mind.