nuxt: Inconsistent css in dev vs prod

The fix for me is to add ignoreOrder: false to extractCSS config.

build: {
    extractCSS: {
      ignoreOrder: false
    }
}

Hope it will help someone.

@clarkdo yeah, I also understand that, but you know, people been controlling css priority by defining specific order for years and practically getting rid of this habit will mean rewriting thousands of already existing css selectors whereas just switching the file order will fix it in a finger snap (you don’t even need to be a Thanos to do that)

And it happening again for “nuxt”: “^2.7.1” In the inspector window, I see that styles have a different order. The application was generated using npx create-nuxt-app test with vuetify ui. And I see that _grid.styl appears after _lists.styl in dev and vice versa in prod. Could this ticket be reopened? Or I need to create new one?

Need to find a way to guarantee ordering, without resorting to making a master CSS/SCSS file that imports all 3rd party libraries + custom style overrides

@clarkdo this is understandable, but sometimes there are use cases when using scoped styles is not an option. e.g. consider a project that was created on top of a vanilla html/css template without any view components to start with, so all those styles are separate scss files bundled in a one big global css chunk that should properly interact with style libraries such as bootstrap that are also connected to the project.

@manniL please, reopen! extractCSS is so buggy that I actually gave up on it, it was easier to reduce styles by 10 times than to fix all issues that keep happening with this property 🤦‍♂️

Based on my experience, there are 2 reasons that i know of that makes the css of the built version not consistent with the dev version.

1. using unscoped style <style> in components
2. using wrong css (i found out i was using “margin: initial 30px” instead of “margin: 0 30px”

@AndrewBogdanovTSS 😸

I understand and I didn’t mean that we must use scoped here.

Since the injection of css files is asynchronous, so the order of css files are not guaranteed, the root problem is more related to the way how we should organize css.

My point is that it’s not a proper way to prioritize styles depending on the order of selector location in file.

If we want make a selector prior to another, we should use higher priority selector:

// component
<style>
.VueToNuxtLogo {
  background-color: red;
}
</style>

// index.vue
<style>
.index .VueToNuxtLogo {
  background-color: blue;
}
</style>

@adi-zz A good advice is that do not depend on the insertion order to write styles: https://github.com/vuejs/vue-loader/issues/938#issuecomment-338279776

It will be correct as your expectation if you add scoped in index.vue:

<style scoped>
.VueToNuxtLogo {
  background-color: blue;
}
</style>