Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS for dev and build/production are different. Production CSS not as expected. #474

Open
jtlindsey opened this issue Oct 27, 2021 · 0 comments

Comments

@jtlindsey
Copy link

Module version
@nuxtjs/vuetify@1.12.1

Describe the bug
dev CSS and production build are different. For example the following code renders side by side in dev and one on top of the other in production. For reproduction I'm only using built in css classes.

<template>
  <v-row>
    <v-col cols="12">
      <v-row>
        <v-img
          class="col-12 col-md-6"
          max-height="250px"
          src="https://images.unsplash.com/photo-1518895949257-7621c3c786d7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=688&q=80"
        ></v-img> 

        <v-col class="col-12 col-md-6">
          <div>Post Title Example</div>
        </v-col>
      </v-row>
    </v-col>

  </v-row>
</template>

I'm trying to show one column on top of the other for small screens and side by side on large screen. But dev and production don't render the same. Tested on same machine, 2 different browsers (chrome, safari) same screen size.

To Reproduce
https://github.com/jtlindsey/vuetifynuxtbuildissue1

Steps to reproduce the behavior:

  1. Run in dev mode and visit localhost:3000
  2. Run build and start and visit localhost:3000
  3. See difference

Expected behavior
Production should match Development

Screenshots
If applicable, add screenshots to help explain your problem.
Production on full screen
image

Dev full screen
image

Additional context
I also made a branch called withoutnuxt and see the same problem in a non-nuxt vuetify app. Do you have any ideas to get around this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant