多个“子应用程序”合二为一(冲突的CSS)

时间:2019-08-09 13:29:19

标签: css reactjs webpack

我的任务是将用Ruby编写的现有Web应用程序迁移到React和Node,但是为了使迁移无缝,快速(在我们对所有内容进行模块化的同时),我们希望可以移植现有样式表结束。

但是,由于React捆绑所有内容的方式,规则和样式中存在很多冲突。缺少启用/禁用样式表的技巧,因此没有任何方法可以迁移整个表并在它们之间动态切换而不会发生冲突(我也尝试过命名它们,但是我一直无法达到理想的效果)。

该应用程序使用了不同版本的Bootstrap,这是我最近“尝试”解决该问题的一种尝试,它类似于:

Array.from(document.getElementsByTagName('link')).forEach(e => {
    if (e.getAttribute('href') === "/assets/css/application.css") {
      e.disabled = false;
    } else if (e.getAttribute('href') === "/assets/css/parent_css.css") {
      e.disabled = true;
    } else if (e.getAttribute('href') === "/assets/css/sb-admin-2.css") {
      e.disabled = true;
    }
  });

这是可行的,但是在确定样式表时会有闪烁。有没有办法防止React捆绑CSS并动态选择样式表? (或者甚至阻止React将它们捆绑在一起?)

0 个答案:

没有答案