如何在 Vue 2 上从第 3 方包延迟加载 css 样式表？

Question

当必须导入第 3 方包及其 .css 样式表时，如何在自定义组件中延迟加载样式表？我正在使用 Vue CLI 5 和 Webpack 5

例如，我有一些自定义组件，我在其中延迟加载第 3 方包，如下所示：

MyCustomComponent.vue

const somePackage = () => import(/* webpackChunkName: "package-name" */  'some-package')
import "some-package/dist/some-package.css"

export default {
    components: {
        somePackage
    },
}

如何延迟加载 .css 文件和“somePackage”？如果我像这样导入 css，我会在构建过程中收到 mini-css-extract-plugin“冲突顺序”错误。

或者，有没有办法将 css 样式表与 vue.config.js 文件中 webpack 配置中的 webpackChunkName 关联起来，这样我就不必在加载“some-package”的所有自定义组件中重复代码？

Answer 1

我回到这个问题，发现我必须这样做：

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

现在 css 被编译为单个块，而不是添加到需要它的所有组件中。