javascript - 在 webpack 构建期间 Vuetify CSS 更改顺序

Question

我正在使用 Vue (3.1.3) 和 Vuetify (1.3.8) 创建一个 Web 应用程序。一切似乎都很好，但是当我进行生产构建时，Vue 以某种方式改变了 CSS 顺序。
问题在于类 .v-list__tile__content和 .align-end .
在 vuetify.css 中，它们分别位于第 4844 行和第 7236 行，但在 npm run build 之后在 dist/css/chunk-vendors.*.css它们位于位置 108929 和 100729。这意味着，应用样式的顺序已切换，并且此 div:<div class="v-list__tile__content align-end">...</div>然后在开发服务器和生产中看起来不同。
开发:

产品:

div 由该组件生成:

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

问题在于 align-items: flex-start/flex-end;有一些系统解决方案吗？我想我可以通过直接设置样式来覆盖它，但它可能会再次发生。

Answer 1

由于您的 CSS 的顺序在构建期间发生了变化(并且假设您的代码在环境之间没有差异)，因此您的 CSS 的顺序似乎由于缩小而发生了变化。一些工具会按属性值对选择器进行分组，以便:

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

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

可以变成:

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

这可能会导致您的 css 的顺序发生变化。
共享您的构建配置可能很有用，因为这似乎就是问题所在。