我必须在我的应用程序中使用一些从右到左(阿拉伯语/希伯来语)的语言进行国际化。所以我希望能够覆盖一些 Bootstrap 类(如 col)，使其向右浮动而不是向左浮动。
我使用 create-react-app (babel/webpack) ，react-bootstrap。
你不能有条件地导入所以我做了一个有条件的要求
if (language.isLanguageLTR()) {
console.log("REQUIRE RTL CSS");
require("./rtl.css");
}
当我处于开发模式时它运行良好，但是当我使用 create-react-app 构建我的应用程序时，即使条件设置为 false 也会导入 css 文件。
有没有办法(当然有!)在我使用引导列的任何地方覆盖一些没有内联 css/特定类的 css 类？
我认为 webpack 会在部署模式下加载它，但我不明白为什么，也许有更合适的方法来有条件地覆盖 css。
我的 css 以防你想更好地理解
.App {
direction: rtl;
}
.col-sm-1 {
float: right;
}
.col-sm-2 {
float: right;
}
...
最佳答案
我明白了。当执行条件导入/请求时，webpack 将始终插入文件(以防万一它可能被调用)。当然，当它是一个 css 文件时，它会覆盖所有内容。 我所做的是使用纯 javascript 定义 css(如这个答案:https://stackoverflow.com/a/15494200)，它就像一个魅力(至少在 chrome/ie/FF 上)。我觉得它不漂亮，我想将它放在 .css 文件中，但它已经是东西了。
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.sheet.insertRule(".App { direction:rtl; }", 0);
style.sheet.insertRule(
".col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: right;}",
1
);`
关于javascript - 从javascript覆盖有条件的bootstrap css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44586480/