Question

在我的Nuxt/Vuetify应用中，我试图在 Vuetify的CSS之后加载我的自定义CSS，但是之后Vuetify的CSS加载没有有什么关系。我试图颠倒CSS数组中的顺序：

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

...然后将其交换，无济于事。

previous question on this topic的流行加上缺乏答案，使我认为问题出在Vuetify'一方，并且作者没有费心去解决这个问题。

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

Answer 1

在A=[[[0, 1, 2], [2, 0, 1], [1, 2, 0]], [[1, 0, 2], [0, 2, 1], [2, 1, 0]], [[1, 0, 2], [2, 1, 0], [0, 2, 1]]] rows = len(A) cols = len(A[0]) B = [] for col in range(cols): bb = [] for row in range(rows): bb.append(A[row][col]) B.append(bb)，vuetify 2.2.19和nuxt 2.0.0中，这仍然是一个问题。第一个解决方案是在@nuxt/vuetify中（在构建部分中）设置extractCss: true。但是对我来说，这会导致HMR错误-样式无法在开发环境中动态更新，因此每次更新样式后我都必须重新加载页面。

对于我而言，正确的解决方案是：

禁用nuxt.config.json，完全删除vuetify部分，从buildModules中删除@nuxt/vuetify。
在'@nuxtjs/vuetify的“样式”部分中以正确的顺序加载样式。我在vuetify中不使用自定义sass变量，对我来说，就像：

nuxt.config.js

即使您使用自定义sass变量，我也建议您在单独的构建步骤中基于它们预编译vuetify并将其放置在静态文件夹中，因为通常它们不经常更改。
使用以下插件手动包含vuetify：

css: [
  'vuetify/dist/vuetify.min.css',
  '@mdi/font/css/materialdesignicons.css',
  '~/assets/styles/main.scss'
]

Answer 2

这似乎是Nuxt的一个未解决问题，不幸的是没有解决。 Vuetify说他们不认为这是对的： https://github.com/vuetifyjs/vuetify-loader/issues/23

自Nuxt ^2.7.1起，人们对于CSS文件加载不一致存在问题。有对它的引用in this issue和this issue。

似乎他们正在尝试对其进行修复，as noted here。不过，不幸的是，在发布此版本之前，我不相信除了恢复到较低版本以外，您还可以做很多事情。

Answer 3

如上所述，这是Nuxt的一个持续问题。但是，您有一些选择。

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

从nuxt.config.js中删除您的替代CSS（保留Vuetify）然后在style布局中的default块中添加替代代码。

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

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

选项2：更好但可能更复杂的方式

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

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

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

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

nuxt.config.js

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

Answer 4

我遇到了相同/相似的问题。

就我而言，我（有点）通过删除nuxt配置中的所有css加载来解决了这个问题：

css: [
    // ~/assets/style/app.styl,
    // ~/assets/style/custom.styl,
],

并将其添加到plugins / vuetify.js：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

import 'assets/style/app.styl'
import 'assets/style/custom.styl'

Vue.use(Vuetify)

现在，我可以覆盖默认的Vuetify主题，但是使用“热模块替换”重新编译代码需要花费更长的时间。

也许不是最好的方法，但我找不到更好的方法。

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

4 个答案:

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

选项2：更好但可能更复杂的方式