How to isolate Vuetify global styles

Asked By: Anonymous

I’ve started to use Vue.js with Vuetify within an old existing project. So I did not rewrite all frontend, I just imported Vue and replaced some parts.

And then I’ve noticed quite an unexpected behavior – Vuetify has global styles for common classes like .title and it effects the whole page, not only Vue part.

So, the questions is, how can I isolate vuetify styles inside Vue components?

UPD: As suggested @DigitalDrifter I tried to use stylus block-level import. So I removed

import 'vuetify/dist/vuetify.min.css' 

from main.js and created a new .styl file (which was imported instead css) with the following content:

.vuetify-styles
    @import '~vuetify/src/stylus/main'

And then added this class to the root component: <App class="vuetify-styles">

UPD2: After that you can get bug related to stylus compilation. More about it -> https://github.com/vuetifyjs/vuetify/issues/4864

UPD3: less also works fine for me.

# vuetify-styles.less
.vuetify-styles {
  @import (less) '../../node_modules/vuetify/dist/vuetify.min.css';
}

And then just import it in your main.js

import './vuetify-styles.less'

Solution

Answered By: Anonymous

Stylus supports block level imports.

If you’ve got the following:

// bar.styl
.bar
  width 10px

// foo.styl
.foo
  @import 'bar.styl'

The end result will be:

.foo .bar {
  width: 10px;
}