CSS Order is different when extractCSS is used

[AndrewBogdanovTSS]

Version

2.2.0

Reproduction link

https://github.com/AndrewBogdanovTSS/nuxt-css-order

Steps to reproduce

• Clone the repo
• $ nuxt build
• $ nuxt start

What is expected ?

Swiper active control has orange color and positioned at the bottom http://take.ms/UsNSR

What is actually happening?

Swiper active control has blue color and has a shift of 10px
http://take.ms/ZDjz0

Additional comments?

This issue is happening due to a fact that order of extracted css files is wrong when extractCSS is in use.
vendors.css is placed after app.css this is causing vendor styles to override stylesheets defined by the user
http://take.ms/ynVEVK
http://take.ms/D8FH9

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

[TheAlexLichter]

Likely related: webpack-contrib/mini-css-extract-plugin#202

[bjunc]

I noticed this as well. It messes with styling when the selector order is what determines specificity. For instance, we use tiny reset. That should be the very first CSS loaded, but in our case (when using extractCSS), it wasn't – making extractCSS completely unusable.

[AndrewBogdanovTSS]

@bjunc yes. As I was mentioning above vendors.css is placed after your.css in the generated index.html and that's what causing all of the issues!

[nmfzone]

I also experiencing this issue. Any solution on this? @atinux
It's very important to notice.

[stale]

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.

[nmfzone]

Still..

[TheAlexLichter]

@nmfzone even with latest nuxt-edge?

[TheAlexLichter]

Looks like it's fixed (https://codesandbox.io/s/github/AndrewBogdanovTSS/nuxt-css-order/tree/master/)

[nmfzone]

@manniL Sorry for coming late. I'm not using Nuxt Edge, because it's production environment. So, I must update/upgrade the Vue to make it works?