将父级中定义的脚本和样式注入到 iframe

我正在构建一个组件库/css 框架，我想在 iframe 中演示它以将样式与页面隔离。我的设置是 Next.js（文档/我想要演示的地方）和 Vite.js（用于库代码）的 monorepo。

用于渲染iframe我在用着react-frame-component https://github.com/ryanseddon/react-frame-component.

我有一个像这样的库入口脚本文件：

// vite-repo, loads all the styling:
import './index.scss'

// 
function init() {
}

init() 

然后在react-components/pages中我可以像这样导入它：

// documentation/demo page
import Frame from 'react-frame-component'
import 'vite-repo' // loads the style of lib and executes the init function, want to do this on the iframe instead.

return Page() {
  // need to inject the styles and js to iframe (react-frame-component).
  <Frame>
  </Frame>
}

知道我该怎么做吗？ 构建库然后像这样导入它们是可行的，但我也希望能够在开发人员上执行此操作（尚未访问构建包）。

// documentation/demo page
return Page() {
  // Inject the styles and js to the iframe.
  <Frame head={
  <script src="/library.min.js"></script>
  <link rel="stylesheet" href="/library.min.css"></link>
  }>
  </Frame>
}

当库代码更改时，您可以更改库代码中的 dev 命令来构建生产包

https://vitejs.dev/guide/build.html#rebuild-on-files-changes https://vitejs.dev/guide/build.html#rebuild-on-files-changes

vite build --watch