Nuxt.js: Setting `extractCSS` to `true` cause error: `Invalid CSS after "... var cssReload": expected selector, was '= require`

[LuXDAmore]

Version

v2.4.0

Reproduction link

CodeSandbox

Steps to reproduce

• Create new Nuxt@^2.4.0
• Add SCSS support npm install --save-dev node-sass sass-loader
• Set extractCSS to true in the build property of nuxt.config.js
• Set an external 'scss' file for 'index.vue' page

What is expected?

To work as expected

What is actually happening?

Error in console and in browser:

Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
^
Invalid CSS after "... var cssReload": expected selector, was '= require("../node_'

Additional comments?

• 2.3.4 was working ok;
• Gave me the same error on every style's import (components && pages);
• Seems a problem related to sass-loader and extract-css-chunks-webpack-plugin.

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

[manniL]

As it's related to extractCSS, https://github.com/faceyspacey/extract-css-chunks-webpack-plugin could be related to the problem as well.

[clarkdo]

@LuXDAmore Thanks for reporting, I’m looking into the issue, the issue is related to hmr, so it won’t affect production mode, I’ll try to figure it out asap

[nathanchase]

FWIW, I also get massive pathing-related errors with Nuxt 2.4.0 (and extract-css-chunks-webpack-plugin) that were not present in 2.3.4.

Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'fonts/myfont.woff' in '\assets\styles'

[lucpotage]

The latest release indeed fixed the issue. However, I got this warning that may be related to this issue too:

chunk pages/interactive-ink.pages/multimodal-input [extract-css-chunks-plugin] friendly-errors 17:57:39
Conflicting order between:

• css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-3!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-4!./node_modules/sass-resources-loader/lib/l
  oader.js??ref--9-oneOf-1-5!./assets/scss/components/VideoPlayer.scss?vue&type=style&index=0&id=7d3cb731&lang=scss&scoped=true&
• css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-3!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-4!./node_modules/sass-resources-loader/lib/l
  oader.js??ref--9-oneOf-1-5!./assets/scss/components/ComparisonTable.scss?vue&type=style&index=0&lang=scss&

Is it related to the style-resources module?

[manniL]

@lucpotage https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126 should help you

[kdydesign]

The same error will still occur after the latest update. Is it associated with mini-css-extract-plugin?

chunk pages_analysis_index [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-1-2!
 ./node_modules/vue-loader/lib/loaders/stylePostLoader.js!
 ./node_modules/postcss-loader/src??ref--5-oneOf-1-3!
 ./node_modules/vue-loader/lib??vue-loader-options!
 ./src/app/components/pageComponents/analysis/AnalysisProfile.vue?vue&type=style&index=0&id=6a64e0f2&scoped=true&lang=css&

 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-1-2!
 ./node_modules/vue-loader/lib/loaders/stylePostLoader.js!
 ./node_modules/postcss-loader/src??ref--5-oneOf-1-3!
 ./node_modules/vue-loader/lib??vue-loader-options!
 ./src/app/pages/analysis/traffic/charts/zone.vue?vue&type=style&index=0&id=5d19fd93&scoped=true&lang=css&

[manniL]

@kdydesign read the link I provided 1 comment above.

[MaxKostenko]

Lifehack :
instead
extractCSS: true
you can use
extractCSS: { ignoreOrder: true }
It will hide warnings. @manniL Probably it is nice to add to documentation

[mvind]

Its a warning about the order of which you import your files. You need to go through the files listed in the warning and work backwards and order ALL imports of that component in the same order in your whole project.