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

Posted 2023-02-22

【中文标题】Nuxt & Vuetify：如何控制 CSS 文件的加载顺序？

【英文标题】：Nuxt & Vuetify: how to control the order in which CSS files are loaded?

【发布时间】：2019-11-02 02:11:11

【问题描述】：

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

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

...然后交换这些，无济于事。

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

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

【问题讨论】：

我相信你必须编辑 nuxt.config.js。在您的自定义 css 中导入 vuetify css 并在您的自定义 CSS 之外禁用自动加载它的技术也可能是一种解决方案。

【参考方案1】：

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

在我的情况下，正确的解决方案是：

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

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

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

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

使用以下插件手动包含 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
      
    
  )

【讨论】：

但是通过这种方式你会失去 css 上的 treeshaking 功能，对吧？

【参考方案2】：

我遇到了同样/类似的问题。

在我的情况下，我（有点）通过删除 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 主题，但使用热模块替换重新编译代码需要更长的时间。

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

【参考方案3】：

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

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

从 nuxt.config.js 中删除您的覆盖 CSS（保留 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',
  ],

【参考方案4】：

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

从 Nuxt ^2.7.1 开始，人们遇到了 css 文件加载不一致的问题。 in this issue 和 this issue 都引用了它。

他们似乎正在尝试修复它，as noted here。不幸的是，在此版本发布之前，我认为除了恢复到较低版本之外，您无能为力。