How to specify output directory with "mini-css-extract-plugin"?

Question

I am using the mini-css-extract-plugin to extract the CSS from a bundle to a file. I need to drop that file in a different place in the filesystem.

How do I configure the mini-css-extract-plugin to drop the CSS file to a different path than the JS bundle?

You can't do that. You can only specify the folder relative to the output folder specified on your webpack config. You would need to manually/automate the copy after the build is success — PlayMa256, Oct 19 '18 at 14:07

score 38 · Accepted Answer · edited Dec 19 '20 at 23:45

38

Let's assume the following config:

webpack.config.js

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, "dist") // this is the default value
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css" // change this RELATIVE to your output.path!
    })
  ]
  // ...
}

Where your output path would resolve to - as an example - /home/terribledev/projects/some-project/dist.

If you change the filename property of the MiniCssExtractPlugin options object to ../../[name].css, it will now be output to /home/terribledev/projects/yourcssfile.css, e.g.:

module.exports = {
  output: {
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "../../[name].css"
    })
  ]
  // ...
}

edited Dec 19 '20 at 23:45

davetron5000

24,123
11
70
98

answered Oct 19 '18 at 15:12

axm__

2,463
1
18
34

2

What if you want to customize the filename? Is there a way to have the output filename match the initial css filename (and not the js filename that holds the import statement)? – doublea Dec 06 '19 at 15:58
how to save in a `css/` directory in `dist` directory? – Sisir Jun 22 '20 at 17:10
@Sisir see my answer – brettinternet Dec 09 '20 at 17:44

score 6 · Answer 2 · answered Dec 09 '20 at 17:42

To specify an output path within the build directory, I include the subdirectory in the filename:

const path = require('path');

module.exports = {
    // ...
    output: {
      path: path.resolve(process.cwd(), 'build'), // should be an absolute path
      filename: 'js/[name].js', // relative to output.path
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css", // relative to output.path
        }),
    ],
    // ...
}

I've tested this in Webpack versions 4 and 5 with success. Check out the docs for Webpack output to learn more.

How to specify output directory with "mini-css-extract-plugin"?

2 Answers2