Warm tip: This article is reproduced from serverfault.com, please click

Vuetify.js

发布于 2020-12-02 13:02:51

I experience problem with Vuetify.js v2.2. When I use container, row or col classes. These styles works fine on 'dev'. Once I build npm run build the project, these styles are not applied anymore.

I could use workaround noted here https://github.com/vuetifyjs/vuetify/issues/8013#issue-472862385, but as mentioned https://github.com/vuetifyjs/vuetify/issues/7978 this should not be the case anymore.

Anybody experienced the same and found official solution?

Examples below:

Live https://www.exchangehours.com/
enter image description here

Local Dev (sorry, no public domain)
enter image description here

Questioner
Nedvajz
Viewed
0
Nedvajz 2021-02-10 16:55:32

The problem was in my lack of knowledge of VuetifyJs and te Vue itself.

# What I used
<div class="container"> </div>  
  
# What needs to be used  
<v-container> </v-container>

I did not check it directly, but my bet is that tree shaking logic of VuetifyJs is the cause. Where on dev you have loaded all vue css & js but after build just needed css & js is added to chunk.js / chunk.css files. Therefore if you do not use Vue components to create container or other grid elements, styles are not included to chunk.

So all works perfectly fine if you follow docs completely.