0

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

GUIJS
  • 69
  • 1
  • 5

0 Answers0