Vuetify styles leaking

Question

I've built a small application using Vuetify, and I'm bundling it all into bundle.min.js, including CSS. However, when importing the bundle into a index.html-file, like so:

<script src=js/bundle.min.js></script>

I can see that some Vuetify styles are leaking into the application that's importing my bundle. After checking out the source CSS I realize that most CSS is scoped under either v-application or other v-component parents, but some of the CSS resets and other styles affecting for example html and body are leaking. An example of this would injecting my bundle into the stackoverflow front page - most text gets bigger and I can see why, for example the Top Questions title has an added styling rule:

html {
    font-size: 16px;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

I've been searching for a solution, and tried everything I've found, but there doesn't seem to be a straightforward solution to this. I realize why Vuetify is built this way, but is there ANY way at all to scope or disregard the CSS resets in Vuetify so that the clients using my bundle can decide what global resets they want themselves? There must surely be a use case for this functionality?

Answer 1

Edit: You can also do this inside of your top-most component inside the style tag, this way it will be inside your bundle.

If you are using LESS/SASS/SCSS you can instead of bundling the CSS into the JS import the vuetify CSS into that file and include the created CSS in the HTML the trditional way.

LESS/SCSS (with SASS you would omit the curly bracets)

.your_class{
  @import "./vuetify.min.css";
}

HTML/PHP

<link rel="stylesheet" type="text/css" href="/path/to/your/created.css">

Instead of downloading the vuetify.min.css you can use the Link to the CDN, just be aware, that it gets downloaded everytime the LESS/SASS/SCSS is transpiled to CSS, so downloading it once is way faster if you modify it often.