How to "prepend" a rule in Webpack config, when you can't modify the rules array?

Viewed 11

I'm using a wrapper around Webpack and I'm not able directly change module.rules array.

I need to add a new rule matching /\.css$/ and a query string named uncritical, to be used this way:

import styles from './app.css?uncritical';

My rule would be:

{
  test: /\.css$/,
  resourceQuery: /uncritical/,
  use: [ /* */ ]
}

module.rules is configured this way, and I guess that /\.(css|pcss|postcss)$/ is winning and will be matched instead of my rule:

[
  {
    test: /\.(jsx?)$/,
    exclude: /(node_modules|bower_components)/,
    use: [ /* */ ]
  },
  {
    test: /\.(css|pcss|postcss)$/, <-- this is winnin over my rule!
    oneOf: [ /* */ ]
  },
  {
    test: /\.(png|jpg|jpeg|gif|ico|svg|webp|avif)$/,
    oneOf: [ /* */ ]
  },

]

How can I assign a higher priority to my rule?

0 Answers
Related