在 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 行，但是在dist/css/chunk-vendors.*.css npm run build ，它们位于位置 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 的顺序发生变化。

共享您的构建配置可能很有用，因为这似乎是问题所在。

Answer 2

这似乎是语言文字方向的问题

element.style {
    direction: ltr;
}