Control import order when importing with multiple rules

• Operating System: macOS 10.15.5 (Catalina)
• Node Version: 12.16.2
• NPM Version: 6.14.4
• webpack Version: 4.41.5
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior / Situation

When using mini-css-extract-plugin to import both module css and non-module css, it would be great to be able to control the order of the css in the output file. I would prefer the output file to have all the css in my non-module css files followed by the css in all the esModule files.

Actual Behavior / Situation

The loader seems to always first load module css files, followed by non-module css files, no matter their order in the config file. This is an issue because my non-module css contain a bunch of boilerplate styles and vendors like Bootstrap and I would like to be able to override them easily.

In order to override them, I would have to add more specificity (or !important) to my module styles. For example:

/* css/general.css (non-css-module file) */
.label {
  color: red;
  underline: 2px solid red;
}

/* modules/component.css (css-module file) */
.override {
  color: blue;
}

<div class={`label ${styles.override}`}>
  I will be red
</div>

In this example, since general.css is always imported AFTER component.css, the resulting color will be red.

Here is the basic configuration:

...
{
  // Import all other css as global
  test: /\.css$/,
  exclude: /modules.*\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
  ],
},
{
  // Import container and component index.css as CSS Modules
  test: /\.css$/,
  include: /modules.*\.css$/,
  loader: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: `${isDevelopment ? '[local]___' : ''}[hash:base64:5]`,
        },
      },
    },
  ],
},

Modification Proposal

I’m not sure I’ve accurately identified the problem (that css-modules are always imported first), but if it is correct, I think something like an importOrder option could work?

I believe this has been brought up in a number of places, though many comments seem to be related to fixing the import order in the css files themselves, which I don’t think is the issue. Here are some of those that I think are related:

https://stackoverflow.com/questions/57487324/how-can-i-control-the-order-of-css-with-minicssextractplugin https://github.com/webpack-contrib/mini-css-extract-plugin/issues/188

Note that as documented in issue 188, this is especially problematic when using style-loader in development, because it effectively reverses the import order and leads to a potential disparity in production.

[sallf]

@evilebottnawi well that was exhausting, but I figured out what was going on in my setup and “order” is the right answer.

In my React SPA I import the full app into a root index file which looks something like this:

import App from '$containers/App';
import '$scss/global.css';
...
render((
  <App />
), document.getElementById('root'));

Since App contains all of my components, which contain all of my css-module imports (import styles from './index.css'), importing in this order effectively imports all css-modules and then my global styles (duh).

The fix is obviously…

import '$scss/global.css';
import App from '$containers/App';
...
render((
  <App />
), document.getElementById('root'));

Additional info

In my case, the problem was accentuated because of using style-loader in my development setup for css-modules and not my global styles. This effectively lead to an inconsistent import order between dev and production. My actual config looked like this:

webpack.config // (BAD - don't use)
{
  // Import container and component index.scss as local CSS Modules
  test: /\.scss$/,
  include: /(components|containers).*\.scss$/,
  loader: [
    isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: `${isDevelopment ? '[local]___' : ''}[hash:base64:5]`,
        },
        sourceMap: isDevelopment,
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: isDevelopment,
      },
    },
  ],
},
{
  // Import all other scss as global
  test: /\.scss$/,
  exclude: /(components|containers).*\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader',
  ],
},

This is terribly obvious in hindsight, but somehow all the comments in other threads about “fixing your order” didn’t help me much. Thanks @evilebottnawi for your timely responses.

[alexander-akait]

@sallf big sorry for delay, we need option(s) to allow specify order, if you put your example here https://github.com/webpack-contrib/mini-css-extract-plugin/issues/555 we will add to test it, we are working on it