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'
To override Vuetify styles with Vue. js, we can add scoped styles with the deep selector. to add the scoped attribute to styles to keep the styles applied to the current component only. And then we use >>> or ::v-deep to select the Vuetify class with the styles we want to override.
Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification .
Vuetify uses SASS/SCSS to craft the style and appearance of all aspects of the framework. Utilizing the sass/scss data option of your vue. config. js file, you can optionally pass in custom variables to overwrite the global defaults.
By default, Vuetify has a standard theme applied for all components. This can be easily changed. Simply pass a theme property to the Vuetify constructor. You can choose to modify all or only some of the theme properties, with the remaining inheriting from the default.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With