How to configure mini-css-extract-plugin

[ghost]

In our Symfony 4.4 project, we're using "@symfony/webpack-encore": "0.28.2" and got the Conflicting order between: warning when compiling.

The Github of the plugin says to put the flag IgnoreOrder to true in the configuration of the plugin.

But this one is automatically loaded by Webpack and I don't know how to access its configuration, the Symfony docs is not really helpful about that.

Also, I came accross all my search on that comment that shows a configureMiniCssExtractPlugin method that would be really helpful in what we're trying to do but I can't find it anywhere in the master of the Encore file.

Has someone already succeeded in resolving this kind of problem?

Thanks in advance for your explanations about it.

[Kocal]

Hi 👋

Actually it's not possible to configure MiniCssExtractPlugin options, which are defined here https://github.com/symfony/webpack-encore/blob/v0.28.2/lib/plugins/mini-css-extract.js#L42-L45

I think we can add a new method .configureMiniCssExtractPlugin which will be usable like this:

Encore
  .configureMiniCssExtractPlugin(options => {
    options.ignoreOrder = true
  });

But maybe it will be a better idea to add a method to configure whatever plugin options? Something similar to .configureLoaderRule?

Encore
  .confgurePlugin('mini-css-extract', options => {
    options.ignoreOrder = true
  });

What do you think @Lyrkan?

[ghost]

Damned! We're writing in english whereas we're all in France. 😆

[Lyrkan]

That's actually something I did in #645

I originally wanted to ship it with a mini-css-extract-plugin update in #564 but there was some issues that seem to be fixed only in Webpack 5 so the first PR was closed.

As I said here I don't have any objection about moving that part in its own PR... I left it in the Webpack 5 one to make sure that it will be available when we will start using the new hmr option.

That being said both solutions have their pros/cons... but what I like with methods such as configureMiniCssExtractPlugin() is that:

• we can document how to use them with examples, links to the plugin repository, etc.
• they can easily be found using IDEs autocompletion

Some plugins may also not be configurable like others... for instance that one also comes with a loader that has its own options, and it's probably a nice thing to be able to change both of them in a single call.

[dirkjf]

For those stumbling upon this issue, thanks to @Lyrkan's work it can be configured like so:

.configureMiniCssExtractPlugin(
  loaderOptions => {},
  pluginOptions => {
    pluginOptions.ignoreOrder = true;
  }
)