Question

我们制作了一个angular 6 webapp，我们希望将此webapp集成到我们的客户网上商店之一。

问题是我们有一些CSS冲突。

例如： -网上商店使用引导程序3和我们的应用程序引导程序4。 -一些商店CSS覆盖了webapp CSS。 -一些webapp css覆盖了webshop css。

避免这些冲突的最佳解决方案是什么？

Answer 1

最好的解决方案是对整个项目使用一个引导程序版本。如果将bs3和bs4混合使用，将会发生冲突，因为类名（对于（大部分）部分而言）是相同的，但是基础的CSS是不同的。

一种解决方案是将网上商店包装在带有特定类的额外div中，并仅为此类导入bootstrap3 css，就像这样（在SASS中）

.webshop {
 @import all-of-bootstrap3;
}

那样，引导程序3仅适用于该包装器内部的所有内容。由于引导程序具有低特异性，因此应该足以覆盖它。

理想的解决方案仍然是对一个项目使用相同的引导程序版本。

编辑：当然，这也可以采用其他方法，您也可以将所有组件包装在一个类中，以便所有CSS使用更高的特异性。如果必须支持多个客户端，甚至可能是更好的解决方案。

您当然也可以从引导程序本身更改css，如此处Customize Twitter Bootstrap Classnames

所述

Answer 2

@cloned的答案很好

此外，您可以尝试通过将一个类放在html标记上来将一个应用包装在一个类中，将另一个应用包装在另一个类中。

然后为这样的一个应用添加所有样式的前缀：

html.app1 .some-style {
  background-color: pink;
}

其他类似这样的应用程序：

html.app2 .some-style {
  background-color: green;
}

如果您使用的是scss或类似的东西，这应该非常简单，因为您可以使用嵌套。