Nuxt & Vuetify：如何控制加载 CSS 文件的顺序？

Question

在我的Nuxt/Vuetify应用程序中，我试图在 Vuetify's CSS之后加载我的自定义CSS，但是Vuetify's CSS 无论如何都会在之后加载。我试图颠倒 CSS 数组中的顺序：

css: [
    '~/assets/style/main.scss',
    '~/assets/style/app.styl'
  ],

...并交换这些，无济于事。

关于这个主题的先前问题的流行加上其缺乏答案让我认为问题在Vuetify'一边，作者没有费心去解决这个问题。

但也许这不是正确的解释，确实有解决方案？

Answer 1

如前所述，这是 Nuxt 持续存在的问题。但是，您有几个选择。

选项 1 肮脏但简单的方法...

从 nuxt.config.js 中删除覆盖 CSS（保留 Vuetify），然后将覆盖代码添加到布局style中的一个块中default。

<style lang="sass">
  @import assets/style/main.scss
</style>

这种方法的问题是，如果添加其他布局，则必须重复它。

选项#2 更好但可能更复杂的方法

创建一个“all”css 文件并将两者导入其中。我说更复杂，因为您可能需要将手写笔编译为 CSS，然后才能导入。但是，我假设您没有更改 Vuetify 样式，因此这可能不会成为问题。

all.scss（确保将其命名为 .scss，以便对其进行处理）

@import "app.styl";
@import "main.scss";

将所有 CSS（按照您想要的任何顺序）导入到该 CSS 文件中。

nuxt.config.js

css: [
    '~/assets/style/all.scss',
  ],

Answer 2

这似乎是 Nuxt 的一个悬而未决的问题，不幸的是它还没有解决。Vuetify 表示他们认为这不站在他们一边： https://github.com/vuetifyjs/vuetify-loader/issues/23

从 Nuxt 开始^2.7.1，人们遇到了 css 文件加载不一致的问题。本期以及本期都有参考。

正如此处所述，他们似乎确实正在尝试修复它。但不幸的是，在发布之前，我不认为除了恢复到较低版本之外您还能做很多事情。