18

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'
2
  • what you means with 'isolate'? Commented Jan 15, 2019 at 16:13
  • I mean create something like namespace for vuetify.min.css, root class for all styles from this and other vue-related styles
    – Vadym
    Commented Jan 15, 2019 at 18:30

1 Answer 1

6

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;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.