在 webpack 构建期间 Vuetify CSS 更改顺序答案

【问题标题】：Vuetify CSS change order during webpack build在 webpack 构建期间 Vuetify CSS 更改顺序
【发布时间】：2019-05-03 01:52:56
【问题描述】：

我正在使用 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 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;

是否有一些系统解决方案？我想我可以通过直接设置样式来覆盖它，但它可能会再次发生。

【问题讨论】：

我在早期版本中遇到过类似的问题，在不和谐中询问是否有人遇到过类似的问题，但没有回应。后来我遇到了导入手写笔的问题：github.com/vuetifyjs/vuetify/issues/3583我还不确定是什么导致了这个问题，或者除了手动覆盖样式之外如何处理它......
我之前被 CSS 顺序烧死了。现在我从不假设 webpack 保证不同文件中样式的任何类型的 CSS 顺序，而是使用 CSS 特异性。
@DecadeMoon 我也尝试在我的 CSS 中坚持这一点，但这些是第三方样式，老实说，覆盖它们感觉有点愚蠢。

【解决方案1】：

由于您的 CSS 的顺序在构建过程中发生了变化（并且假设您的代码在不同环境之间没有差异），因此您的 css 的顺序似乎由于缩小而发生了变化。一些工具会按属性值对选择器进行分组，这样：

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

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

可以变成：

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

这可能会导致 CSS 的顺序发生变化。

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

【讨论】：

这看起来可能是原因，我明确怀疑缩小。我最终只是将它与一些 !important 覆盖一起破解。可悲的是，它来自我很久以前（超过 2 年）工作的应用程序，我不再拥有可用的源代码。所以没有办法验证这一点。不过还是谢谢。
Woops.. 你可以看看是否有办法从你的缩小中排除那部分（文件？）。不要以为还有很多其他的可能性。祝你好运！

【解决方案2】：

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

element.style {
    direction: ltr;
}

【讨论】：

您能详细说明一下吗？我想不出为什么在构建后文本的方向在多个环境中会有所不同的原因。我的假设是构建过程存在问题。 Overwand 的答案似乎是在某些事情上。谢谢