Nuxt.js: ExtractCSS rule breaks HMR and SourceMaps in dev mode.

[AndrewBogdanovTSS]

Version

v2.5.1

Reproduction link

https://codesandbox.io/s/w08yyp72zk

Steps to reproduce

1. Enable extractCss in nuxt.config.js
2. Run nuxt in dev mode
3. Try to update css/scss inside of the component

What is expected ?

1. Page CSS is re-rendered dynamically without a need for a page refresh
2. Sourcemaps points to the correct file

What is actually happening?

1. CSS changes appear only after full page refresh
2. CSS Sourcemaps point to generated css files - not on components it was initially written

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

[manniL]

Should be probably reported to https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/ as well which is used for extractCSS

[mkurczewski]

Dirty fix:

{
  // ...
  extractCSS: process.env.NODE_ENV === 'production'
}

[manniL]

@AndrewBogdanovTSS As mentioned in https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/161, does it still happen in nuxt-edge (which depends on v4.2.X)?

[levemsan]

The problem persists even with nuxt-edge and extract-css-chunks-webpack-plugin^4.2.0.

[AndrewBogdanovTSS]

@manniL yes, I tried to use latest version of extract-css-chunks-webpack-plugin and only after that logged an issue in their repo

[AndrewBogdanovTSS]

@manniL just tested it with latest Nuxt 2.6.0 beta which uses extract-css-chunks-webpack-plugin 4.2.0. and can confirm that it's still broken. I've also updated a repro link to use 4.2.0 explicitly

[gerbenqikker]

I also am experiencing this on Nuxt 2.6.0

[davision]

I can confirm this. It was super frustrating before I've realized, the extractCSS was the issue with HMR. The issue exists from v2.5.0 on.

[cannap]

Hi, i have this also in Nuxt.js v2.6.2

[ashnamuh]

I have the same issue on 2.7.1

[aloiseau17]

There is any news about this issue ?
Related issue on extract-css-chunks-webpack-plugin is close but problem still occur for me.

[Venegrad]

still have this problem with extractCSS