[Feature Request] Use CSS Variables for styling to remove need for recompiling SCSS

[sugoidesune]

Problem to solve

Customizing Vuetify has since Vuetify2 been cumbersome to implement and extremely slow as it recompiles all SCSS in all components used or unused, on each change to to the variables or nuxt.config With build times reaching minutes. Unfortunately this hasn't been adressed in Vuetify3, with any performance improvements coming not from Vuetify 3 but from projects like Vite. It even comes with a wall of warnings:

Proposed solution

Using CSS Variables should remove the need recompile.

// instead of this
$button-height: 40px,
button {
height: $button-height
}

Vuetify could use this:

:root {
--vuetify-default-button-height: 40px;
//customized
--vuetify-button-height: 37px;
}

button {
// CSS variables support fallback
height: var(--vuetify-button-height, --vuetify-default-button-height);
}

This allows for deep customization without recompiling or complicated implementation steps. And should for the majority of projects remove the need to recompile vuetify.

[taozhiyu]

There is also tree shaking optimization, it would be nice if the css could be optimized as the generated css is up to 500k!

I gave up on utils and switched to use tailwindcss, it would be a hassle but now the css file is only 70k

[KaelWD]

Maybe in the future, not currently planned.