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'
vuetify.min.css
, root class for all styles from this and other vue-related styles