Nuxt & Vuetify: how to control the order in which CSS files are loaded?

Question

In my Nuxt/Vuetify app I'm trying to load my custom CSS after Vuetify's CSS, but Vuetify's CSS gets loaded afterwards no matter what. I tried to reverse the order in the CSS array:

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

... and swap these around, to no avail.

The popularity of a previous question on this topic combined with its lack of answer makes me think the problem is on Vuetify' side and authors didn't bother to fix the issue.

But maybe that's not the right explanation and there's indeed a solution?

Answer 1

That's still an issue in vuetify 2.2.19, nuxt 2.0.0 and @nuxt/vuetify. The first solution could be setting extractCss: true in the nuxt.config.json (in the build section). But for me it leads to HMR bug - styles are not updated dynamically in dev environment, I had to reload the page after every style update.

The proper solution in my case is:

1. Disable @nuxt/vuetify, remove vuetify section entirely, remove '@nuxtjs/vuetify from buildModules.

2. Load styles in the correct order in styles section of nuxt.config.js. I don't use custom sass variables in vuetify, and for me it's like:

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

3. Even if you use custom sass variables, I would suggest to precompile vuetify based on them in a separate build step and place in static folder, because usually they don't change frequently.

4. Include vuetify manually using the following plugin:

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 2

As noted, this is an ongoing issue with Nuxt. However, you have a few options.

Option 1 The dirty but easy way...

Remove your override CSS from the nuxt.config.js (keep Vuetify) then add your override code a style block in your default layout.

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

The problem with this approach is you'll have to duplicate it if you add additional layouts.

Option #2 The better but possibly more complex way

Create an "all" css file and import both into it. I say more complex as you may need to compile your stylus into CSS before it can be imported. However, I assume you're not changing the Vuetify styles so that likely won't be an issue.

all.scss (make sure to name it .scss so it gets processed)

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

Import all your CSS (in any order you want) to that one CSS file.

nuxt.config.js

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

Answer 3

It seems like it's an open issue with Nuxt, and it's unfortunately not solved. Vuetify says they don't think it's on their side: https://github.com/vuetifyjs/vuetify-loader/issues/23

As of Nuxt ^2.7.1, people are having issues with inconsistent css file loading. There's a reference to it in this issue, as well as this issue.

It does seem like they are attempting to fix it, as noted here. Unfortunately though, until this is released, I don't believe there's much you could do besides reverting to a lower version.