如何避免angular 6应用集成到其他应用中的css冲突？

Question

我们做了一个angular 6 webapp，我们想把这个webapp集成到我们的一个客户webshop中。

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

例如：- webshop使用bootstrap 3和我们的app bootstrap 4。-一些商店css覆盖webapp css。-一些webapp css正在覆盖webshop css。

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

Answer 1

最好的解决方案是对整个项目使用一个引导版本。如果您混合使用bs3和bs4，将会出现冲突，因为类名(对于大多数(网格)部分)是相同的，但是底层的css是不同的。

一种解决方案是将webshop包装在带有特定类的额外div中，并仅为该类导入bootstrap3 css，如下所示(在SASS中)

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

这样一来，bootstrap 3只适用于这个包装器中的所有内容。由于bootstrap的细节较低，这应该足以覆盖它。

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

编辑:当然，这也适用于另一种方式，你也可以将你的所有组件包装在一个类中，这样你所有的css都使用更高的规范。如果您必须支持多个客户端，那么它甚至可能是更好的解决方案。

当然，您也可以从bootstrap本身更改css，如此处Customize Twitter Bootstrap Classnames所述。

Answer 2

来自@cloned的好答案

此外，通过在html标签上放置一个类，您可以尝试将一个应用程序包装在一个类中，而将另一个应用程序包装在另一个类中。

然后为你的所有样式添加前缀，如下所示：

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

另一款应用是这样的：

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

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