When a 3rd party package have to be imported along with its .css stylesheet, how do I lazy-load the stylesheet in my custom components? I'm using Vue CLI 5 and Webpack 5
For example, I have some custom components in which I lazy-load a 3rd party package like this:
MyCustomComponent.vue
const somePackage = () => import(/* webpackChunkName: "package-name" */ 'some-package')
import "some-package/dist/some-package.css"
export default {
components: {
somePackage
},
}
How do I lazy-load the .css file along with "somePackage"? If I import the css like this, I get mini-css-extract-plugin "Conflicting order" errors during the build.
Or, is there a way to associate the css stylesheet with the webpackChunkName in webpack config in vue.config.js file, so I don't have to repeat the code in all my custom components that loads "some-package"?