Dans mon application Nuxt/Vuetify, j'essaye de charger mon CSS personnalisé après le CSS de Vuetify, mais le CSS de Vuetify est chargé ensuite quoi qu'il arrive. J'ai essayé d'inverser l'ordre dans le tableau CSS:

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

... et échangez-les, en vain.

La popularité d'une question précédente sur ce sujet combiné avec son manque de réponse me fait penser que le problème est du côté de Vuetify et les auteurs ne se sont pas donné la peine de résoudre le problème.

Mais ce n'est peut-être pas la bonne explication et il y a effectivement une solution?

10
drake035 19 juin 2019 à 13:50

4 réponses

Meilleure réponse

Il semble que ce soit un problème ouvert avec Nuxt, et il n'est malheureusement pas résolu. Vuetify dit qu'ils ne pensent pas que c'est de leur côté: https://github.com/vuetifyjs/vuetify-loader/issues/23

Depuis Nuxt ^2.7.1, les utilisateurs rencontrent des problèmes de chargement de fichiers css incohérents. Il y a une référence à cela dans ce numéro, ainsi que ce problème.

Il semble qu'ils tentent de le réparer, comme indiqué ici. Malheureusement, jusqu'à ce que cela soit publié, je ne pense pas que vous puissiez faire grand-chose en plus de revenir à une version inférieure.

1
Nick G 26 juin 2019 à 19:02

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.

0
imricardoramos 9 juil. 2019 à 17:07

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
      }
    }
  })
}
0
Kasheftin 30 mars 2020 à 07:24

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',
  ],
3
Bryce Howitson 26 juin 2019 à 20:06