[Vuejs]-Change location of extracted CSS from lazy-loaded VueJS component

by

0👍

Turns out I overlooked a piece of the Vue CLI docs where you can pass an object to extract.

Instead of a true, you can also pass an object of options for the mini-css-extract-plugin if you want to further configure what this plugin does exactly.

So using (in the css part of vue.config.js):

extract: {
    filename: '[name].css',
    chunkFilename: 'prefix-chunk-[contenthash].css'
}

And the same in the MiniCssExtractPlugin options and Webpack output options, I was able to have all the on-disk filenames and filenames within the loader function of the entry-point match up.

Thanks to @benyuanzhang on the VueJS Discord server for pointing it out.

Leave a comment