[Bug Report][4.0.3] Vite 8 Build create wrong CSS Layering (eg. Button)

[mdunisch]

Environment

Vuetify Version: 4.0.3
Vue Version: 3.5.30
OS: macOS 10.15.7 (current)

Expected Behavior

• Updating a vite 8 app from vuetify 3 -> 4 should create working buttons
• Updating a vuetify 4 app from vite 7 -> vite 8 should create the same css output

Actual Behavior

Vite 8 (Build mode) + vuetify 4 creates strange CSS Layer ordering.

Visual Problems:
Button gets font: inherit (from core-reset) on the highest order

There may be way more issues!

Other comments

• Seems like Vite 8 Build mode (uses new bundler) creates other CSS files
• Works fine on vite dev more, problem is only on vite build mode

[mdunisch]

My current Hotfix is adding a global overwrite:
.v-btn { font-size: var(--v-btn-size); }

[Smrtnyk]

I reordered layers in index.html as a workaround

[Daenara]

I am currently hunting the same issue and I can say it also happens with vite 7.3.1.

I did play around with this for a while, if I remove all import 'vuetify/styles' statements, it works, but I am missing most stylings so that is not a solution. I tried reproducing this on the playground, but there it works fine, all layers in order...

My actual issue is not the font-size, I get the wrong text color since it applies the reset layer above the color layer that should set the on- correctly.

From the looks of it, the layers are completely inverted, with reset being the last layer

[mdunisch]

@Daenara i stumbled over the same error - but that seems like a different thing to me.

On my codebase the issue for this was that the App.vue (and therefore other things) was imported before the vuetify-css. Was fine but stopped working after updating to vuetify 4 (independent from vite version or vite mode).
See https://vuetifyjs.com/en/getting-started/installation/#existing-projects: You need to import the vuetify-css BEFORE anything else using vuetify-components!

So for me what you describe seems like an relating issue but is not!

[vitaha85]

I have the same problem with Vite 8
dev

build

button, input, optgroup, select, textarea {
    font: inherit;
}

has the highest order in the build

[herodotus-ecosystem]

I also encountered this problem.

After upgrading from Vuetify 3 to Vuetify 4, it’s necessary to manually add a layers.scss file before vuetify/styles. Otherwise, this issue will occur in development mode. See: https://vuetifyjs.com/zh-Hans/styles/layers/

However, this only resolves the issue in development mode.

When deploying the project using Vite compilation, especially with Vite’s code splitting optimization enabled, the problem still persists. By checking the index.html file after Vite compiles, it can be seen that layers.scss is loaded after vuetify/styles.

I tried various solutions, including adjusting the positions and order of layers.scss and vuetify/styles, but none worked.

Eventually, I found a temporary workaround: after Vite compiles the code, manually modify the index.html file to place vuetifystyles after layers.scss, ensuring that layers.scss loads first.

Note: The actual compiled files won’t be named vuetify/styles and layers.scss; they might be vuetify-[hash].css and main-[hash].css.

[HaiGeMaster]

I encountered the same problem,,,help me