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

Question

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

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

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

关于这个主题的先前问题的受欢迎程度加上缺乏答案，使我认为问题在Vuetify方面，作者没有费心解决这个问题。

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

Answer 1

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

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

从nuxt.config中删除你的覆盖CSS.js(保留Vuetify(然后在default布局中添加覆盖代码style块。

<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 2

这

在vuetify 2.2.19、nuxt 2.0.0和@nuxt/vuetify中仍然是一个问题。第一个解决方案可能是在nuxt.config.json(在构建部分(中设置extractCss: true。但对我来说，这会导致 HMR 错误 - 样式不会在开发环境中动态更新，我必须在每次样式更新后重新加载页面。

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

1. 禁用@nuxt/vuetify，完全删除 vuetify 部分，从 buildModules 中删除'@nuxtjs/vuetify。

2. 在 nuxt.config.js 的样式部分中以正确的顺序加载样式。我不在 vuetify 中使用自定义 sass 变量，对我来说就像：

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

3. 即使您使用自定义 sass 变量，我也建议您在单独的构建步骤中基于它们预编译 vuetify 并放置在静态文件夹中，因为通常它们不会经常更改。

4. 使用以下插件手动包含 vuetify：

import Vue from 'vue'
import Vuetify from 'vuetify'
import en from 'vuetify/lib/locale/en'
import lt from 'vuetify/lib/locale/lt'
import pl from 'vuetify/lib/locale/pl'
import colors from '~/config/colors'
Vue.use(Vuetify)
export default ({ app }) => {
  app.vuetify = new Vuetify({
    lang: {
      locales: { en, lt, pl },
      current: 'en'
    },
    icons: {
      iconfont: 'mdi'
    },
    theme: {
      options: {
        customProperties: true
      },
      themes: {
        light: colors
      }
    }
  })
}

Answer 3

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

截至Nuxt ^2.7.1，人们遇到了不一致的css文件加载问题。本期和本期都有对它的引用。

正如这里所指出的，他们似乎正在尝试修复它。不幸的是，在发布之前，我认为除了恢复到较低版本之外，您无能为力。

Answer 4

添加以防这对某人有帮助。 我在 NUXT 项目中遇到第三方库的 css 无法正确加载的问题。 他们支持频道上的开发人员发现该问题与postcss有关。

将其添加到nuxt.config.js解决了我们案例中的问题：

nuxt.config.js:
build: {
    postcss: false
  }

该项目也在这里作为 NUXT 错误打开：PostCSS 删除了一些 CSS 规则

Answer 5

我一直遇到相同/类似的问题。

就我而言，我(有点(通过删除nuxt配置中的所有css加载来解决它：

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

并将其添加到插件/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 主题，但使用热模块替换重新编译代码需要更长的时间。

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