Load Webpack bundle, whilst keeping all CSS local

Question

I am having an issue, with the pollution of CSS local VS global properties.

My application is loaded via a script tag on the page of a third party website, it is a vuejs application delivered via a single bundle.js.

When the app loads (modal), it inherits many of the CSS properties of the page, such as fonts.

Is there anyway to protect the styling of the app being served via a webpack bundle?

I have explored, various webpack plugins, but none give the desired effect.

Answer 1

based on this answer, I think what you can do is, assuming the top level of the Vue app/modal has an id of app:

#app {
   all: unset!important;
}