Vue 3. Vite, createApp() 并从 iframe 中的单个文件组件中包含 CSS

Question

有点棘手和独特的用例。

我有一个 Vue 3 应用程序，使用 Vite 开发和构建。我正在 iframe 中实例化第二个 Vue 3 应用程序实例，相关代码粘贴在下面。因为我需要 iframe 中的第二个应用程序可用的未受污染的组件和样式。


import { h, ref, createApp, onMounted, onBeforeUnmount, onBeforeUpdate } from "vue"

export default {
  setup(props, { attrs, slots, emit, expose }) {
  
        const iframeRef = ref(null)
        const iframeBody = ref(null)
        const iframeHead = ref(null)
        const iframeStyle = ref(null)
        let app = null
        let emitSelection;
   
onMounted(() => {
  iframeBody.value = iframeRef.value.contentDocument.body
  iframeHead.value = iframeRef.value.contentDocument.head
  const el = document.createElement("div")
  iframeBody.value.appendChild(el)
  app = createApp(MySecondAppLayout, props)
  app.use(MyUILibrary);
  app.mount(el)
})

return () => h("iframe", { ref: iframeRef })


}

一切正常，第二个应用程序实例导入它自己的组件并在 iframe 中正确安装和运行。但是，SCSS/CSS 样式不包含在 iframe 上下文中。

我想做的事是不可能的吗？或者是否有一个标签我可以注入到 iframe 中以包含导入组件的样式？

或者 i/can 我是否应该将所有单个文件组件的样式表输出为文本文件，以便我可以手动将其粘贴到 iframe 的顶部？

Answer 1

我能够使用 vite 重新打包我的组件库，然后使用这个插件：https://www.npmjs.com/package/vite-plugin-libcss我可以将 css 手动导入 iframe。

Vue 3. Vite, createApp() 并从 iframe 中的单个文件组件中包含 CSS

Vue 3. Vite, createApp() and include CSS from single file components within iframe

iframe

vuejs3

vite