如何在使用“IFrame -frame-component”库创建的组件中加载由webpack提供的css？

Question

我正尝试在iframe中呈现我的React组件。我通过使用"react-frame-component“库让它工作。问题是样式被加载到iframe之外，在"head“元素的末尾。我想将其更改为加载到"iframe“元素的"head”中。我使用Webpack来生成包含JS和CSS的bundle，我看到我可以通过设置"insertInto“选项来更改"style-loader”加载样式的位置，但这会抛出一个错误：

Uncaught Error: Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.

这是我的React组件：

import Frame from 'react-frame-component'
...
ReactDOM.render(
  <Frame id="someId">
    <Provider store={Store.get()}>
      <Container/>
    </Provider>,
  </Frame>,
  document.body
);

这是我在Webpack配置中的"style-loader“：

{
  loader: 'css-loader',
  options: {
    insertInto: () => document.querySelector("#someId"),
  },
}

我认为问题在于，当webpack试图包含样式时，组件并未呈现。如何解决这个问题？

Answer 1

您需要将样式作为占位符加载到临时元素中，然后使用Javascript将这些样式克隆到新框架中。

// index.html
...
<div id="dynamic-styles"></div>
...

// webpack.config.js
...
{
  loader: 'css-loader',
  options: {
    insertInto: () => document.getElementById("dynamic-styles"),
  },
}
...

// some.js
...

const stylesContainer = document.getElementById('dynamic-styles');
const frame = document.getElementById('someID');
const frameHead = frame.contentWindow.document.head;

[...stylesContainer.children].forEach(styleNode => {
  const newStyle = document.createElement('style');
  newStyle.textContent = styleNode.textContent;

  frameHead.appendChild(newStyle);
});

我还没有测试过上面的代码片段，但我知道这个概念是可行的。我觉得这让我明白了这点。

也许有一种更好的方法可以做到这一点，但我还没有充分研究过它来弄清楚。如果能够让webpack创建单独的样式包，这样每个配置的框架就可以自动延迟加载它自己的专用绑定css，那就太好了