search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

Cannot change path of CSS files extracted from lazy-loaded components #239

Closed roberttolton closed 3 years ago

roberttolton commented 3 years ago

Hi,

I have also posted a question on Stack Overflow: https://stackoverflow.com/questions/65600776/change-location-of-extracted-css-from-lazy-loaded-vuejs-component

But I'm wondering if this is an issue with vue-custom-element having some overriding authority on where the extracted CSS files of components are kept? Because all of the options I've tried via vue.config.js have not worked...

This wouldn't be an issue in 'normal' situations because I could just move the CSS files into the expected css sub-folder of publicPath but, I can't as I need them at the top-level.

Appreciate this might not be an 'issue' but any help is appreciated!

roberttolton commented 3 years ago

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.