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?
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"
})
]
// ...
}