webpack "Conflicting order" - mini-css-extract-plugin in CI

By Daniel Zoghalchali·Latchkey

mini-css-extract-plugin extracts CSS into files and preserves import order. When the same stylesheets are imported in different orders from different entry points, it cannot pick one order and warns about the conflict - which warning-strict CI can fail on.

What this error means

The build prints [mini-css-extract-plugin] Conflicting order. Following module has been added: ... despite it was not able to fulfill desired ordering with these modules, naming CSS files. CI gated on warnings then fails.

webpack

WARNING in [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js!./src/Button.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./src/Card.css

Common causes

Inconsistent CSS import order across modules

Two components import the same stylesheets in different sequences, so the extracted order is ambiguous. The plugin warns rather than silently picking one.

Order-dependent CSS that should not be

Styles that rely on import order (cascade-sensitive overrides) make the conflict meaningful; truly order-independent CSS makes the warning safe to ignore.

How to fix it

Normalize import order or ignore the warning

If the CSS is order-independent, disable the ordering check; otherwise import stylesheets in a single consistent order.

webpack.config.js

// webpack.config.js
new MiniCssExtractPlugin({
  ignoreOrder: true, // when CSS is not order-dependent
})

Make styling order-independent

Adopt CSS Modules or scoped/utility CSS so cascade order stops mattering.
Import shared stylesheets from one central place rather than per-component in varying orders.
Keep the CI warning gate, but set ignoreOrder once the order is verified safe.

How to prevent it

Use scoped/CSS-Module styles so import order does not change behavior.
Import shared CSS from a single consistent location.
Set ignoreOrder: true deliberately once order-independence is confirmed.

Frequently asked questions

What causes ""Conflicting order""?