My project requires internationalization support for right-to-left languages like Arabic and Hebrew, so I need to modify some Bootstrap classes (such as col) to float right instead of left.
I am using create-react-app with babel/webpack and react-bootstrap.
Since importing conditionally is not possible, I have implemented a conditional require in my code:
if (language.isLanguageLTR()) {
console.log("REQUIRE RTL CSS");
require("./rtl.css");
}
While this setup works fine in development mode, I face an issue when building my application using create-react-app - the css file gets imported even if the condition evaluates to false.
Is there a way (which I believe exists!) to override specific css classes without resorting to inline styles or adding special classes everywhere I use bootstrap columns?
I suspect webpack behavior might be the culprit during deployment, but I don't fully understand why. Perhaps there is a better approach to conditionally overriding css.
Below is a snippet of my custom css for reference:
.App {
direction: rtl;
}
.col-sm-1 {
float: right;
}
.col-sm-2 {
float: right;
}
...