CODEWITHSUNDEEP
javascriptcssvue.jsvuetify.jsvuetify-1
Josef Jura
Josef Jura

Reputation: 532

Vuetify CSS change order during webpack build

I am creating a web app using Vue (3.1.3) and Vuetify (1.3.8). All seems to be fine, but when I do production build, Vue somehow changes the CSS order.

The problem is with classes .v-list__tile__content and .align-end.

In vuetify.css, they are on lines 4844 and 7236 respectively, but after npm run build in dist/css/chunk-vendors.*.css they are on positions 108929 and 100729. This means, that the order in which the styles are applied is switched and this div:

<div class="v-list__tile__content align-end">...</div>

then looks differently on dev server and production.

DEV: enter image description here

PROD: enter image description here

The div is generated by this component:

<v-list-tile-content class="align-end">{{ dish.price }}</v-list-tile-content>

The problem is with the align-items: flex-start/flex-end;

Is there some system solution to this? I guess I can override it by directly setting the style, but it might happen again.

Upvotes: 23

Views: 2122

Answers (2)

Ovenwand
Ovenwand

Reputation: 45

Since the order of your CSS is changing during the build (and assuming there is no difference in your code between environments), it seems the order of your css is changed due to minification. Some tools will group selectors by property value, so that:

.foo {
  align-items: flex-start;
}

.bar {
  align-items: flex-start;
}

Can be turned into:

.foo, .bar {
  align-items: flex-start;
}

This could cause the order of your css to change.

It could be useful to share your build configuration as it appears that's where the issue lies.

Upvotes: 1

Yoel Diamant
Yoel Diamant

Reputation: 1

This seems to be a problem of text direction by language

element.style {
    direction: ltr;
}

Upvotes: 0

Related Questions