Nuxt.js: 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)}

[manniL]

Likely related: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/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[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.

[nmfzone]

Still..

[manniL]

@nmfzone even with latest nuxt-edge?

[manniL]

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?

[manniL]

@nmfzone Updating Vue should be fine, yes (yarn upgrade or npm update)

[AndrewBogdanovTSS]

I checked it on my projects and I can confirm that the bug is fixed! Thanks @mannil

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[AndrewBogdanovTSS]

This issue reappeared on version 2.3.4, also was able to reproduce it on Nuxt-edge aka 2.4
Repro link: https://codesandbox.io/s/qqp1wq28yw
Additional screenshot from a real world project:
https://monosnap.com/file/pbTr2qlW2Y5GByq2RoV3y3Mlmytrg4
as you can see app.css is linked twice and the second time it's linked after pages.css that should be last in a list of css linkages.
Correct order:

1. vendors.css
2. app.css
3. pages.css
   No duplicates should be present

[manniL]

@AndrewBogdanovTSS Any chance that you could track down the commit that broke it? 🤔

[AndrewBogdanovTSS]

@manniL I will look for it, though as far as I remember @pi0 was writing about some updates regarding mini-css-extract-plugin in the latest releases. I think it should definitely be related to mini-css-extract-plugin

[manniL]

@AndrewBogdanovTSS That'd be great!

We switched to https://github.com/webpack-contrib/extract-text-webpack-plugin in the mean time ☺️

And the fix came with one of the Vue release IIRC.

[manniL]

@AndrewBogdanovTSS maybe https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/586 🤔

[AndrewBogdanovTSS]

@manniL yes, it may be related as at least 5 more issues I saw when I was looking for some kind of a solution to this problem :)

[thomasaull]

Anything new to this problem?

[AndrewBogdanovTSS]

I just upgraded my project to Nuxt 2.4.2 / Vue 2.6.2 and it seems that problem is fixed again. Although there is still one strange issue: http://take.ms/G6mzJ
as you can see there is 2 identical records for /_nuxt/app.87370d9c34e5a92a0fb0.css file, both for "preload" and regular link. There should be only 2 references, not 4

[nmfzone]

@AndrewBogdanovTSS It's not duplicated, it's the correct behaviour. The first 2 css is preload-ed css. I think it's time to upgrade my Nuxt project 🎉

[manniL]

@nmfzone but it's the same CSS 2x in preload and 2x "normal"
@AndrewBogdanovTSS is it the exact same link?

[nmfzone]

@manniL Whoops, my bad 😕 revert comment...........

[AndrewBogdanovTSS]

@mannil of course it's exactly the same, that's what I wrote in my comment. Right now what I get in the dev tools is application of the same styles twice. It doesn't change visuals but slows down performance for no good reason

[manniL]

@AndrewBogdanovTSS Could you open file a dedicated issue for it?

[AndrewBogdanovTSS]

@manniL sure

[manniL]

Closing here as the initial issue seems to be gone.

[AndrewBogdanovTSS]

@manniL could you reopen this issue? I tried deploying several times and discovered that order is still random. Sometimes it works as expected, but other times it's not. The order I'm currently get is:

1. vendors.css
2. app.css
3. pages.css
4. app.css
   https://take.ms/hyZSH
   that last one shouldn't be there at all and brakes the whole sequence

[LostCrew]

We also most certainly experienced the same issue on Nuxt 2.3.4 and nuxt-sass-resources-loader 2.0.5.

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

[AndrewBogdanovTSS]

Any updates regarding this issue?

[mrleblanc101]

I have this issue, sometime the scoped style are inlined before the Global CSS from nuxt.config.json sometime not.
Why mean selector with the same specificity are not in the same order so my ssr display a green button and my client a blue button.

[poweron707]

I also found similar issue:
In my case: I installed Nuxt v2.6.2 and Vuetify v1.5.12
Case 1: In nuxt.config.js, Add custom theme(theme.styl) and set "extractCSS: false"

Result is that theme.styl is loaded first, default buttons.styl loaded last, so custom style in theme.styl cannot override default button style ;

Case 2: In nuxt.config.js, set "extractCSS: true"

As you can see, the CSS load order is changed, the default button style can be override; I got confuse whether it is expected result when using extractCSS in build config

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

[thomasaull]

@stale[bot] @poweron707 described a way to reproduce this issue

[poweron707]

1. use nuxt with vuetify example https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify
2. create one styl file like theme.styl and overwrite v-btn style like:
   .v-btn
   text-transform: lowercase
3. load this file into nuxt.config.js as above captured screens
4. switch the value of extractCSS

[clementmas]

I'm having the same issue. I described the problem here: https://github.com/nuxt/nuxt.js/issues/4204#issuecomment-497910208

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

[AndrewBogdanovTSS]

@manniL please, reopen this issue since it's still not fixed.
The only workaround for this issue currently is to specify extractCSS as
extractCSS: process.env.NODE_ENV === 'production'

[manniL]

Still likely related to https://github.com/webpack-contrib/mini-css-extract-plugin/issues/202

maybe @ScriptedAlchemy has a clue? :thinking:

[trylovetom]

@manniL same here,

[ScriptedAlchemy]

Do you get any order warning errors from webpack? I did see a PR which isn’t exactly related to this issue but does enhance how ordering is Forgive me for not reading the thread fully, is this a dev or production issue.

If development, then I have good news, an upcoming PR improves my work on HMR, specifically around injecting styles. Maybe this will resolve your issue? I can link you to the PR if anyone wants to take a peek

[AndrewBogdanovTSS]

@ScriptedAlchemy yes, it's a dev issue. No - no webpack warnings and it's no more an ordering issue, right now the problem is that in DEV mode we got styles ejected from js into separate css files although it should be happening only in production. Please, link to the PR.

[ScriptedAlchemy]

mini-css HMR is designed to generate actual css files though, just like in production. Only difference is it can hmr those stylesheets.

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/188
https://github.com/webpack-contrib/mini-css-extract-plugin/pull/371

[AndrewBogdanovTSS]

@ScriptedAlchemy maybe it can, but that doesn't happening, HMR is not triggering and sourcemaps are broken

[ScriptedAlchemy]

Hmmm ive seen heard of sourcemaps issue. Ill pull down your reproduction link and take a look.

[rnenjoy]

Im having this issue aswell with the same code ive had before working. Turning off extractCSS gives my css lowest priority vs vuetifys, so mine is overwritten. it has not been like this before."nuxt": "^2.9.2",

[szafran89]

I have the same issue, any solution? Thanks in advance!

[trylovetom]

my workround, use node-sass, sass-loader replace extractCSS

Install Dep.
yarn add node-sass sass-loader --dev

Your Style

<style lang="scss">
...
</style>

[AndrewBogdanovTSS]

@trylovetom I don't understand how scss correlate with extractCSS? I use sass-loader and node-sass and still have same issue

[ortonomy]

@trylovetom -- this isn't a solution.

How did you incorporate sass-loader? did you add a custom webpack config?

[kirosc]

@trylovetom I don't understand how scss correlate with extractCSS? I use sass-loader and node-sass and still have same issue

Same here. My mobile version scss code goes before the desktop version but the other way around in the development environment.

[tegola]

Same issue here, using Next 2.10.2. I've read all threads related to this issue and I still don't understand what's causing the different extraction order.

I'm trying to keep 1-level selectors, and in the example below the component css is applied after the override in the page (thus is red) because the page css is loaded first.

// component.vue
<template>
    <div class="my-component">
    ...
    </div>
</template>

<style>
.my-component {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

// page.vue
<template>
    <div class="my-page">
        <my-component class="my-page__component" />
    </div>
</template>

<style>
.my-page__component {
    background-color: blue;
}
</style>

// build.css
.my-page__component {
    background-color: blue;
}
.my-component {
    width: 100px;
    height: 100px;
    background-color: red; /* winning rule (wrong) */
}

[sanasus]

Та же проблема здесь, используя Next 2.10.2. Я прочитал все темы, связанные с этой проблемой, и я до сих пор не понимаю, что вызывает другой порядок извлечения.

Я пытаюсь сохранить одноуровневые селекторы, и в приведенном ниже примере компонент css применяется после переопределения на странице (таким образом, красного цвета), потому что сначала загружается css страницы.

// component.vue
 < template > 
    < div  class = " my-component " >
    ...
    </ div > 
</ template >

< стиль > 
. my-component {
     ширина : 100 пикселей ;
    высота : 100 пикселей ;
    цвет фона : красный;
}
</ style >

// page.vue
 < template > 
    < div  class = " my-page " > 
        < my-component  class = " my-page__component " />
     </ div > 
</ template >

< стиль > 
. my-page__component {
     background-color : blue;
}
</ style >

I have exactly the same problem. The import order and so on do not affect this, if I extract everything in 1 css file, then there is no such error, but the console is full of warnings.

[mateuszs]

up +1. Any solutions?

@sanasus @tegola

[fvonellerts]

I had the same issue when importing my global SCSS in layouts/default.vue instead of adding it to the css Array in nuxt.config.js.

[tegola]

up +1. Any solutions?

I haven't found any except using page-scoped styles or two-level selectors.

[mjmnagy]

Same issue here - just leaving in dev mode for the time being

[stouch]

Same here ....

[p-moreira]

Same too.

• import the global CSS in nuxtconfig.js

extractCSS = false:
- DEV mode: all is ok
- PRODUCTION mode: wrong styling is applied

extractCSS = true:
- all is ok in DEV and in PRODUCTION

[mayurwish]

Same here
Development mode: Css & Scss loads well
Production mode: fail to load some css & scss even though package.json includes node-sass, sass-loader & @nuxtjs/style-resources

[clarkdo]

Can anyone who has the issue please provide minimum reproducible test repo?

We'll try to figure out what's root cause in extract-css-plugin.

[tegola]

Can anyone who has the issue please provide minimum reproducible test repo?

Here you go:
https://github.com/tegola/nuxt-css-order-test-case

[aaronransley]

Checking in on this, just ran into this during a big production deploy 😬

[LordZombi]

Same shit here :/ boss was not very happy ...

DEVELOPMENT:

PRODUCTION:

[clarkdo]

@nuxt/core-team Can you have a look if you have get chance ? I’m sorry that I’m trapped with personal affairs recently.

[kyriediculous]

I'm currently running into this whereby my scoped styles that are imported through component specific stylesheets get overwritten in production mode.

Tried this with Nuxt 2.10.2 and 2.13.2

<style lang="scss" scoped>
 import ...
</style>

is there any solution to this?

setting extractCss: true in my nuxt.config.js file didn't work for me.

[Everkers]

I have the same issue in production : (

[clarkdo]

@tegola I've looked into your repo, it looks the issue is related to vue-loader:

1. In dev mode, vue-loader will ignore styles returned from ssr and re-added them as components loading order (pages/index -> MyComponent) in browser side, so you can see correct background-color
2. In prod mode, vue-loader will attach style injecting to beforeCreate hook of vue component. In Vue, beforeCreate and created of the parent run first, so beforeCreate of pages/index will be executed before MyComponent and style of pages/index is injected before MyComponent

I found that there already has some discussions in vue-loader: https://github.com/vuejs/vue-loader/issues/808#issuecomment-303785334 https://github.com/vuejs/vue-loader/issues/521 , I'll talk to team and try to figure a proper solution for it.

[Everkers]

Fixed by updating our nuxtjs version to the latest one😃

[evgeniy-logvinov]

I have the same issue, and it is not solved by last version of nuxt js(2.13.3)

[tegola]

I've just upgraded the test case to nuxt 2.14 and I cannot confirm it's fixed. The issue is still there.

[devilstars]

up. same issue here. nuxt 2.14.1

[victorgarciaesgi]

When I set extractCss: true, all my css is deleted in production mode

[Capu-zennio]

I don't understand why this issue was closed despite all the reports of it still happening, after just one comment by someone whose project got fixed with no notes or reproduction example.

This is still a very real problem.

Would @Atinux or someone from the Nuxt team care to reopen this so it can be tracked and hopefully fixed?

[mjmnagy]

I don't understand why this issue was closed despite all the reports of it still happening, after just one comment by someone whose project got fixed with no notes or reproduction example.

This is still a very real problem.

Would @Atinux or someone from the Nuxt team care to reopen this so it can be tracked and hopefully fixed?

Unfortunately, it was @Atinux who closed it -- CSS is important and if it isn't right the entire app can be F'd. Renders nuxt irrelevant IMO. Can't get the basics right then it might be time to move on(2 year old problem is...)

[Atinux]

Can you please take a look at this answer: https://github.com/nuxt/nuxt.js/issues/4219#issuecomment-657510969

And see if the issue does not come from this?

[kyriediculous]

@Atinux prod and dev should be deterministic for this specific case so no

[rwam]

Hi @Atinux, well it seems it's related with https://github.com/nuxt/nuxt.js/issues/4219#issuecomment-657510969 but the advice to increase the css specifity from https://github.com/vuejs/vue-loader/issues/808#issuecomment-303785334 is about three and a half years old and there exists no other solution to fix that? Because https://github.com/vuejs/vue-loader/issues/808 was closed and the issue exists furthermore.