Nuxt & Vuetify: ¿cómo controlar el orden en que se cargan los archivos CSS?

este problema se puede resolver de diversas formas, pero en este caso te damos la solución más completa para nosotros.

Solución:

Como se señaló, este es un problema continuo con Nuxt. Sin embargo, tienes algunas opciones.

Opción 1 El camino sucio pero fácil…

Elimine su CSS de anulación de nuxt.config.js (mantenga Vuetify) y luego agregue su código de anulación a style bloquear en su default diseño.

El problema con este enfoque es que tendrá que duplicarlo si agrega diseños adicionales.

Opción #2 La mejor pero posiblemente más compleja manera

Cree un archivo css “todos” e importe ambos en él. Digo más complejo, ya que es posible que deba compilar su lápiz en CSS antes de poder importarlo. Sin embargo, supongo que no está cambiando los estilos de Vuetify, por lo que probablemente no sea un problema.

todo.scss (asegúrese de nombrarlo .scss para que se procese)

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

Importe todo su CSS (en el orden que desee) a ese único archivo CSS.

nuxt.config.js

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

Eso sigue siendo un problema en vuetify 2.2.19, nuxt 2.0.0 y @nuxt/vuetify. La primera solución podría ser establecer extractCss: true en el nuxt.config.json (en la sección de construcción). Pero para mí conduce a un error de HMR: los estilos no se actualizan dinámicamente en el entorno de desarrollo, tuve que volver a cargar la página después de cada actualización de estilo.

La solución adecuada en mi caso es:

1. Desactivar @nuxt/vuetify, elimine la sección vuetify por completo, elimine '@nuxtjs/vuetify de buildModules.

2. Cargue los estilos en el orden correcto en la sección de estilos de nuxt.config.js. No uso variables sass personalizadas en vuetify, y para mí es como:

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

3. Incluso si usa variables sass personalizadas, sugeriría precompilar vuetify en función de ellas en un paso de compilación separado y colocarlo en static carpeta, porque normalmente no cambian con frecuencia.

4. Incluya vuetify manualmente usando el siguiente complemento:

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
      
    
  )

Parece que es un problema abierto con Nuxt y, lamentablemente, no está resuelto. Vuetify dice que no creen que esté de su lado: https://github.com/vuetifyjs/vuetify-loader/issues/23

A partir de Nuxt ^2.7.1, las personas tienen problemas con la carga de archivos css inconsistentes. Hay una referencia a ello en este número, así como en este número.

Parece que están intentando arreglarlo, como se indica aquí. Sin embargo, desafortunadamente, hasta que esto se publique, no creo que haya mucho que puedas hacer además de volver a una versión inferior.

Si eres capaz, tienes la habilidad dejar un enunciado acerca de qué le añadirías a este ensayo.

---

---

Utiliza Nuestro Buscador