问题移至此处
我已经将bootstrap 4添加到我的magento 2项目中。然而，Bootstrap正在覆盖Magento2核心CSS（反之亦然，取决于加载顺序）。
有没有一个工具，我可以上传两个CSS文件，它显示我冲突的CSS规则？
body { font-size: 1rem; }
.nav { background: yellow; }
.header { font-size: 12px; }
...
body { font-size: 1.4rem; }
.nav { background: red; }
.header { font-color: black; }
foo.css: body { font-size: 1rem; }
bar.css: body { font-size: 1.4rem; }
foo.css: .nav { background: yellow; }
bar.css: .nav { background: red; }
用浏览器检查页面将允许您选择一个受影响的元素，并查看哪些CSS文件试图设置该元素的哪些属性，以及哪些已占上风。
例如，Chrome和Safari在这里的工作方式类似:右键单击page->；检查->；点击Elements选项卡（或者用element selector箭头在页面上选择一个元素）->；在右窗格“Styles”选项卡上，您将看到其CSS影响以及它们来自的文件。
即使您可以通过编程方式比较2个CSS文件的意图，它也不会产生足够的信息来推断任何给定的web页面源将如何呈现。
这是因为CSS不能分辨某些元素的元素ID和类的交叉位置，或者元素的类的列出顺序。
理论上，可以比较两个CSS文件，但这本身只是一个理论练习，因此效用有限。
如果您想知道这两个文件一起操作对呈现的网页的影响，比较两个CSS文件是不够的。
为了确定效果，所需的工具需要获得三个输入（2个CSS文件和1个静态HTML网页）。它只能告诉您该页面的冲突，而不能预测对任何其他页面的影响。只有当您的网页是静态的（即没有分解或来自CMS或PHP），没有涉及其他CSS，没有修改任何DOM元素或CSS的脚本，也没有生成或更改HTML的脚本时，它才会工作。
考虑到上述限制，即使你想要的解决方案可以被找到或构建，也会发生，请重新考虑这是否对解决你的问题有很大的用处。
无论如何，我不知道有这样的工具。
