Vuetify: [Bug Report] expansion panel style different in dev and prod

[kidonng]

Versions and Environment

Vuetify: 2.0.0-beta.2
Vue: 2.6.10
Browsers: Chrome 76.0.3809.21
OS: Windows 10

Steps to reproduce

1. Clone the repo and run (yarn serve).
2. Build for production (yarn build) and run.

Expected Behavior

The style for expansion panel in production should be the same as in development:

Chrome Devtools screenshot

.v-expansion-panels > *:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.v-expansion-panel {
    flex: 1 0 100%;
    max-width: 100%;
    position: relative;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.v-expansion-panels > * {
    cursor: auto;
}

.v-item-group > * {
    flex: 1 1 auto;
}

Actual Behavior

Expansion panel's flex declaration is overridden, thus making the second panel behaving wrongly.

Chrome Devtools screenshot

.v-expansion-panels>:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.v-item-group>* {
    flex: 1 1 auto;
}

.v-expansion-panel {
    flex: 1 0 100%;
    max-width: 100%;
    position: relative;
    transition: .3s cubic-bezier(.25,.8,.5,1);
}

.v-expansion-panels>* {
    cursor: auto;
}

Reproduction Link

https://github.com/kidonng/pixiv-collection/tree/db64aa7c9be8f7445fd3e0cd9bd03e9679e5e7d0

Other comments

The problem seems to be caused by Webpack (or loaders), but I can't find a better way than overriding the style myself.

[ismarslomic]

Experiencing the same issue, it seems like css is loaded in different order in dev and prod builds, take a look at https://github.com/ismarslomic/homeydash.combined/tree/master/src

I tried removing import of Vuetify CSS from src/plugins/vuetify.tsand adding to index.html file, but same issue.

In addition, if I remove importing of Vuetify CSS completely, it works perfectly well in dev, but not in prod build

[jacekkarczmarczyk]

Might be related: https://github.com/vuejs/vue-loader/issues/808

[ismarslomic]

Interesting, @jacekkarczmarczyk! I think you are right, here is what I did and it seems to work:

1. replaced import 'vuetify/dist/vuetify.min.css'; with import('vuetify/dist/vuetify.min.css') in the src/plugins/vuetify.ts
2. tested with following NODE_ENV=production npm run serve

However, I do get the warning when I run : "Cannot find module 'vuetify/dist/vuetify.min.css'.". If i try running npm run build this error message stops the build. If I completely remove the import statement I see that CSS is missing. Getting confused here

[cheneyweb]

I'm also have this "v-bottom-navigation" problem with vuetift 2.0.1