vue.js - Change location of extracted CSS from lazy-loaded VueJS component

Question

I'm using VueJS 2 and vue-custom-element with lazy-loading like so:

Vue.customElement('nav-icon', () => new Promise((resolve) => {
    require(['./NavIcon.vue'], (lazyComponent) => resolve(lazyComponent.default));
}), {
    beforeCreateVueInstance
});

This is so I can upload the JS and CSS into a Shopify Theme and use <nav-icon> to display a custom component.

Everything works except that in my main entry-point JS file, the names of the chunks for the CSS files, and the path they sit at, are wrong.

Within the configureWebpack portion of my vue.config.js file, I have the output set as so:

output: {
    filename: '[name].js',
    chunkFilename: 'my-prefix-[name].js'
}

This works for the JS files.

I have a plugins entry for the MiniCssExtractPlugin that renamed the resulting CSS files on-disk:

new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: 'my-prefix-[name].css'
})

But this does NOT update the the names within the entry-point JavaScript (they're missing 'my-prefix-'), so when requested, they all 404..!

Within the entry-point JavaScript they're all also requested under a css/ folder, which I can't use.

How can I:

A) Rename the CSS chunks correctly so that the on-disk filenames, and what is requested in the entry-point JavaScript match-up

B) Change the css/ path that the entry-point JavaScript is thinking they are within. I cannot use a sub-folder as Shopify Theme Assets do not support sub-folders, everything must be top-level

If I manually edit the generated entry-point file to remove the css/ path and set the correct names, they work as expected and load fine. But obviously this is tedious and not scalable..

Thanks!

Answer 1

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.