Nuxt & Vuetify: comment contrôler l'ordre dans lequel les fichiers CSS sont chargés?

J'ai eu le même problème / similaire.

Dans mon cas, je l'ai (un peu) résolu en supprimant tout le chargement css dans la configuration nuxt:

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

Et l'a ajouté aux 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)

Maintenant, je peux remplacer le thème Vuetify par défaut, mais il faut beaucoup plus de temps pour recompiler le code à l'aide de Hot Module Replacement.

Ce n'est peut-être pas la meilleure façon de le faire, mais je n'ai pas pu trouver de meilleur moyen.

C'est toujours un problème dans vuetify 2.2.19, nuxt 2.0.0 et @nuxt/vuetify. La première solution pourrait être de définir extractCss: true dans le nuxt.config.json (dans la section construction). Mais pour moi, cela conduit à un bogue HMR - les styles ne sont pas mis à jour dynamiquement dans l'environnement de développement, j'ai dû recharger la page après chaque mise à jour de style.

La bonne solution dans mon cas est:

1. Désactivez @nuxt/vuetify, supprimez entièrement la section vuetify, supprimez '@nuxtjs/vuetify de buildModules.

2. Chargez les styles dans le bon ordre dans la section styles de nuxt.config.js. Je n'utilise pas de variables sass personnalisées dans vuetify, et pour moi, c'est comme:

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

1. Même si vous utilisez des variables sass personnalisées, je suggérerais de précompiler vuetify en fonction d'elles dans une étape de construction distincte et de les placer dans un dossier statique, car elles ne changent généralement pas fréquemment.

2. Incluez vuetify manuellement à l'aide du plugin suivant:

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
      }
    }
  })
}

Comme indiqué, il s'agit d'un problème permanent avec Nuxt. Cependant, vous avez quelques options.

Option 1 Le moyen sale mais facile ...

Supprimez votre CSS de remplacement du nuxt.config.js (gardez Vuetify) puis ajoutez votre code de remplacement un bloc style dans votre mise en page default.

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

Le problème avec cette approche est que vous devrez la dupliquer si vous ajoutez des mises en page supplémentaires.

Option n ° 2 La meilleure solution, mais peut-être la plus complexe

Créez un fichier css «tout» et importez-y les deux. Je dis plus complexe car vous devrez peut-être compiler votre stylet en CSS avant de pouvoir l'importer. Cependant, je suppose que vous ne changez pas les styles Vuetify afin que ce ne soit probablement pas un problème.

all.scss (assurez-vous de le nommer .scss pour qu'il soit traité)

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

Importez tous vos CSS (dans l'ordre de votre choix) dans ce fichier CSS.

nuxt.config.js

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