Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to isolate Vuetify global styles

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'
like image 507
Vadym Avatar asked Jan 15 '19 15:01

Vadym


People also ask

How do you override Vuetify style?

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.

Is Vuetify easy to learn?

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 .

What CSS does Vuetify use?

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.

How do you customize Vuetify?

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.


1 Answers

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;
}
like image 71
Brian Lee Avatar answered Oct 11 '22 11:10

Brian Lee