vuetify-module
vuetify-module copied to clipboard
Option to choose if Vuetify css gets prepended or appended
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?
Also having issues with this. Is there any known workaround?