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;
  }
)

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[nerdess]

@Lyrkan is there a documentation for configureMiniCssExtractPlugin() somewhere? If so, I can't find it!

I currently try to configure mini-css-extract-plugin so that it is disabled at a certain path ('assets/react') where style-loader should do its magic instead.

[Lyrkan]

@nerdess Hm, I think you could do it by playing with configureLoaderRule('css', (rule) => { ... }) (change the first parameter by 'sass' / 'less' / 'stylus' if you are using one of them) but it may not be trivial and subject to break if the default structure of that rule changes in a future version.

That being said, if you are actually trying to use CSS modules with React maybe importing yourfile.css?module instead of yourfile.css would work since there is already a rule for that (see https://github.com/symfony/webpack-encore/blob/main/lib/config-generator.js#L341-L355)

[nerdess]

@Lyrkan Yeah I realized that .configureMiniCssExtractPlugin() is not the right place and that .configureLoaderRule() is the last straw.

I already played around with ?module, but it does not work.

The only way that style-loader works is by adding .disableCssExtraction() but then, the normal CSS that is added using <link....> is not working anymore. Unfortunately, .disableCssExtraction() does not accept any parameters to fine-tune it apart from true/false.

I cannot believe I am the only one with that problem though, there must be plenty of people out there that use React within Symfony (via ux-react) that need scoped CSS or SCSS within their React Modules but also use "global" CSS added the old-fashioned way in the main Twig template.

[stof]

@nerdess see the message from @Lyrkan mentioning yourfile.css?module for imports wanting to treat a CSS import as a scoped module instead of extracting it in the main CSS.