Modify @wordpress/scripts MiniCssExtractPlugin settings with webpack.config.js

Question

I'm using the @wordpress/scripts package and I want to modify the output of the css files to make them go into a subfolder called css. How do I either remove the original MiniCssExtractPlugin settings or modify the original settings made in the default config? I don't know how to target the already created MiniCssExtractPlugin so I can remove it or modify it.

I have tried adding

plugins: [
  ...defaultConfig.plugins,
  new RemoveEmptyScriptsPlugin(),
  new MiniCssExtractPlugin({
    filename: "css/[name].css",
    ignoreOrder: false,
  }),
]

to a webpack.config.js file in the project folder and it does output the css in a subfolder called css, however, the css ALSO get output in the root of the output folder.

score 0 · Answer 1 · answered Jan 19 '23 at 15:17

The answer from Faisal sent me in the right direction so here's the code I ended up with that seems to work.

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//Remove default MiniCssExtractPlugin settings
defaultConfig.plugins = defaultConfig.plugins.filter((plugin) => {
  return !(plugin instanceof MiniCssExtractPlugin);
});

module.exports = {
  ...defaultConfig,
  plugins: [
    ...defaultConfig.plugins,
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      ignoreOrder: false,
    }),
  ],
};

Modify @wordpress/scripts MiniCssExtractPlugin settings with webpack.config.js

1 Answers1