Nuxt.js: Inconsistent css in dev vs prod

[adi-zz]

Version

v2.2.0

Reproduction link

https://github.com/adi-zz/nuxt-css-dev-vs-prod

Steps to reproduce

1. git clone https://github.com/adi-zz/nuxt-css-dev-vs-prod
2. cd nuxt-css-dev-vs-prod
3. npm i
   
   
   
   1. npm run dev
   
   
   2. npm run build && npm run start
   
   
4. open http://localhost:3000/

What is expected ?

The background color of nuxt logo should be blue in both cases 3.1. and 3.2. (or at least red in both cases).

What is actually happening?

Background is blue in dev mode (3.1.), and red in prod mode (3.2.)

Additional comments?

My project was generated using npx create-nuxt-app test (choosing all defaults)

_{This bug report is available on Nuxt community (#c8047)}

[aldarund]

Reproduced on codesandbox https://codesandbox.io/s/m570wpvv1j

[spnc-omz]

I'm also seeing this. For the time being I've pinned my version to v2.1.0 of nuxt and it works.

[manniL]

@spnc-omz Oh, so it worked with 2.1?

[spnc-omz]

This gets even more weird. I think I had a dependency issue. Everything worked for me after I updated my postcss preset env to ~6.3.0

[AndrewBogdanovTSS]

@spnc-omz which exact module are you referring to? I only see postcss-env-function in my node_modules folder

[clarkdo]

@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>

[AndrewBogdanovTSS]

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

[clarkdo]

@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>

[AndrewBogdanovTSS]

@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)

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[tmorehouse]

I'm seeing this issue also.

Using the nuxt.config.js css option, I am seeing inconsistent CSS load order, which doesn't follow the order specified. in the CSS array

We are using 3rd party CSS libraries, of which we create an override style sheet, which needs to be loaded last, and sometimes it is being loaded first.

[tmorehouse]

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

[AndrewBogdanovTSS]

Wasn't this already been fixed? I had similar issue I logged here https://github.com/nuxt/nuxt.js/issues/4219#issuecomment-446199957
and now it's respecting an order for me

[AndrewBogdanovTSS]

@tmorehouse did you try it with Nuxt 2.4.2? Is it working for you?

[tmorehouse]

@AndrewBogdanovTSS

The issue appears to have been fixed.

[manniL]

Nice!

[eiva]

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?

[clementmas]

Yes, I'm having the same issue here with inconsistent styling between dev and prod environments.

Here's a link to a reproduction: https://codesandbox.io/s/examplenuxtvuetifycssorder-k4ob0

• Expected: have card title and text on the same line because of CSS display: inline inside component (which works well in dev environment)
• Result: card title and text are on 2 different lines because the third-party CSS display: flex appears after (only in prod environment)

I thought it might be an issue with vuetify-loader but they say it's not: https://github.com/vuetifyjs/vuetify-loader/issues/23

Can this issue be reopen?

[fbrbovic]

I am experiencing the problem too. Also using vuetify-loader

[AndrewBogdanovTSS]

@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 🤦‍♂️

[manniL]

Please see #4219

[mjmnagy]

Styles are different - not using purgecss or any other plugin accept nuxt defaults

[DengSihan]

this issues happened to the css which used on the classname/id/element add by javascript, when you run npm run prod ,then nuxt will check which classname/id/element were used, and render these css only, different from npm run dev which nuxt will render all the css

add the css in <style></style> can fix this