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

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?

cssvue.jsvuetify.jsnuxt.js


Solution 1:[1]

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.

Solution 2:[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',
  ],

Solution 3:[3]

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'
]

  1. 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.

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

Solution 4:[4]

I've been having the same/similar problem.

In my case I (kinda) solved it by deleting all the css loading in the nuxt config:

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

and added it to the 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)

Now I can override the default Vuetify theme but it takes a lot longer to recompile the code using Hot Module Replacement.

Maybe not the best way to do it but I couldn't find a better way.

Solution 5:[5]

Adding in case this helps someone. I was having trouble with a 3rd party library's css not loading properly in a NUXT project. A dev on their support channel discovered that the problem was related to postcss.

Adding this to the nuxt.config.js fixed the issue in our case:

nuxt.config.js:

build: {
    postcss: false
  }

The item was also opened up as a NUXT bug here: Some CSS rules removed by PostCSS

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nick G
Solution 2 Community
Solution 3 Kasheftin
Solution 4 imricardoramos
Solution 5 Kevin B

Related Questions