Question: How to set a custom path to the postcss.config.js file?

[lukasz-zaroda]

I'm using Symfony and I would like to move all config files to the app/config . I figured out that I can set the path to the webpack.config.js file by adding --config [PATH] to the encore script. Unfortunately I cannot currently figure out how to set the path to the postcss.config.js file of postcss-loader. Without Encore I would set a config option in the config of postcss-loader, but how can I do that when Encore is managing the whole configuration? Is there any way?

[Lyrkan]

Hi @lukasz-zaroda,

Unfortunately right now you can't directly change the options of the postcss-loader (apart from enabling source maps).

What you can do though, is retrieve the webpack config first, and modify it before it is exported in your webpack.config.js.

I didn't test it but something like that should work:

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
    // (...)
    .enablePostCssLoader()
;

// retrieve the config and modify the postcss loader
const webpackConfig = Encore.getWebpackConfig();

if (webpackConfig.module && webpackConfig.module.rules) {
    for (const rule of webpackConfig.module.rules) {
        if (rule.use) {
            for (const loader of rule.use) {
                if (loader.loader === 'postcss-loader') {
                    loader.options = Object.assign({}, loader.options, {
                        config: './app/config/postcss.config.js',
                    });
                }
            }
        }
    }
}

// export the final configuration
module.exports = webpackConfig;

[lukasz-zaroda]

Thanks! It almost worked, the config has to be an object though so:
config: { path: './app/config/postcss.config.js' },

It's a shame that there is no easier way to customize loaders. It would be very useful to have some API for that.

[Lyrkan]

Indeed, I forgot that the postcss options were not at the root level, good catch :)

You could also handle the case were the shorthand syntax was used to add the loader ('postcss-loader' instead of {loader: 'postcss-loader', options: {}}) but I think Encore always uses the full syntax for now.

Some loaders options can already be set using the public API (e.g.: enableSassLoader, enableTypeScriptLoader, enableVueLoader, ...), that's just not the case for this one.
Maybe it should though, WDYT @weaverryan?

[lukasz-zaroda]

I'm pretty new to webpack so I'm not competent enough yet to suggest a proper solution, but I think it should be possible to override all encore's defaults in some simpler, generic way. It would be great if there would be at least some helper functions for parsing and modifying in place the configuration object.

[weaverryan]

There is indeed now a way to configure this - thanks to #130 (or, there will be after the next tag).

We're missing ways to configure some underlying options temporarily - we intend to add hooks like this pretty much everywhere, and we're adding them as people request :).

Cheers!