how to lazy-load css stylesheet from 3rd party package on Vue 2?

Question

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"?

Answer 1

I got back to this and found out I just had to do:

import(/* webpackChunkName: "some-package-css" */ 'some-package/dist/some-package.css')

now the css is compiled in a single chunk instead of being added to all components that requires it.