How to avoid css conflict when integrating angular 6 app into other app?

Question

We made an angular 6 webapp and we would like to integrate this webapp into one of our customer webshop.

The problem is that we have some css conflict.

For example : - The webshop uses bootstrap 3 and our app bootstrap 4. - Some shop css are overriding webapp css. - Some webapp css are overriding webshop css.

What is the best solution to avoid these conflicts ?

Answer 1

The best solution would be to use one bootstrap version for the whole project. If you mix bs3 and bs4 there will be conflicts because the classnames are (for the most (grid-)part) the same but the underlying css is different.

One solution would be to wrap the webshop in an extra div with a specific class and import bootstrap3 css only for this class, like so (in SASS)

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

That way bootstrap 3 only works for everything that's inside this wrapper. Since bootstrap has low specifity, this should be enough to overwrite it.

Ideal solution would still be to use same bootstrap-version for one project.

Edit: This of course also works the other way around, you can also wrap all of your components in one class so that all your css are using the higher specificy. Might even be the better solution if you have to support multiple clients.

you can of course also change the css from bootstrap itself, as explained here Customize Twitter Bootstrap Classnames

Answer 2

Good answer from @cloned

Also, you might try to wrap one app in one class and the other app in another class by putting a class on the html tag.

Then prefix all your styles for one app like this:

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

And the other app like this:

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

If you are using scss or something similar this should be pretty straightforward since you can use nesting.