Mini-css-extract-plugin: ignoreOrder option

Created on 14 Mar 2019 · 4Comments · Source: webpack-contrib/mini-css-extract-plugin

Hello!

I'm using the newest package version 0.5.0 which I use to replace deprecated extract-text-webpack-plugin with webpack 4.

With the old plugin, we had ignoreOrder: true inside our config (needed for CSS) to have our styles loaded in the correct way. After we upgraded to webpack4 and mini-css-extract-plugin I can't find the related option and our CSS modules are not loaded in the correct way. Is there a similar option that might fix our problem ?

4 (nice to have) minor 4 (inconvenient) feature

Source

skrobek

👍11

Most helpful comment

As has been pointed out in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250:

Sorting all imports (not just in files but in tree traversal import order is extremely difficult to do in a large project
Consistent use of scoping or naming conventions in CSS makes the order of CSS import irrelevant, and this is a much more manageable strategy for a large project as @jsg2021 said in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-416710488
Using stats.warningFilter as recommended by @sokra in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126 or webpack-filter-warnings-plugin is not a good solution. It would be much better to avoid generating the warnings at their source (optionally) rather than to partially filter them later with regexes. I use webpack-error-on-warnings-plugin to enforce that there are no warnings in a build. This is incompatible with filtering warnings, because it must happen in the before-emit hook so that it prevents emission of assets when there are warnings. The warnings filtering happens in the done hook or in the toJson method, which is too late.

hedgepigdaniel on 26 Mar 2019

👍9

All 4 comments

No similar option, you need fix order, please provide minimum reproducible test repo

alexander-akait on 14 Mar 2019

As has been pointed out in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250:

Sorting all imports (not just in files but in tree traversal import order is extremely difficult to do in a large project
Consistent use of scoping or naming conventions in CSS makes the order of CSS import irrelevant, and this is a much more manageable strategy for a large project as @jsg2021 said in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-416710488
Using stats.warningFilter as recommended by @sokra in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126 or webpack-filter-warnings-plugin is not a good solution. It would be much better to avoid generating the warnings at their source (optionally) rather than to partially filter them later with regexes. I use webpack-error-on-warnings-plugin to enforce that there are no warnings in a build. This is incompatible with filtering warnings, because it must happen in the before-emit hook so that it prevents emission of assets when there are warnings. The warnings filtering happens in the done hook or in the toJson method, which is too late.