0

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 ?

Bfr
  • 27
  • 6
  • In my angular.json "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css",...] – Bfr Sep 26 '18 at 07:53
  • Your question seems not to be related to Angular or javasctipt. Please read [how to ask a good question](https://stackoverflow.com/help/how-to-ask) and update your question. – FIL Sep 26 '18 at 08:14

2 Answers2

3

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

cloned
  • 6,346
  • 4
  • 26
  • 38
  • We do not only have conflict with bootstrap but also with other css. We cannot force our customer to change his css configuration. And our app is supposed to be integrated in a lot of different webshop with different technology. – Bfr Sep 26 '18 at 08:16
  • then you need to encapsulate the webshop somehow else in the app, maybe with an iframe or something. But sadly these are your options, either use an iframe or wrap something in a class and be more specific. Of course you can also wrap your code in a class so that only your code uses the higher specifity. – cloned Sep 26 '18 at 08:19
0

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.

danday74
  • 52,471
  • 49
  • 232
  • 283