vuetify-module icon indicating copy to clipboard operation
vuetify-module copied to clipboard

Option to choose if Vuetify css gets prepended or appended

Open leonceaklin opened this issue 5 years ago • 1 comments

Is your feature request related to a problem? Please describe. To this day, it is not possible to combine or extend Vuetify with custom css code properly. It is possible to use sass variables, however, if you want to change attributes of given Vuetify components, you will notice that this doesn't work well. This is because Vuetify css code gets loaded after your custom code and overwrites everything which doesn't use !important (if you are lucky) or nested css selectors. Luckily, the solution for this problem would be easy: an option to prepend Vuetify's css code before your customations.

Describe the solution you'd like A new vuetify:{} property in nuxt.config.js to set if css code for Vuetify gets prepended or appended to the css sources defined in the nuxt.config.js css property.

Describe alternatives you've considered Writing bad looking css code with !important and deep child selectors.

Additional context It could look like this:

vuetify: {
    prependCss: true,
},

I am open for other approaches to prepend custom css. I did just not find an other solution on the internet yet. I also have the feeling that customizing Vuetify that way is not very common. Am I missing something?

leonceaklin avatar Jul 12 '20 19:07 leonceaklin

Also having issues with this. Is there any known workaround?

IOIIOOIO avatar Sep 29 '21 10:09 IOIIOOIO