title: How to load css provided by webpack inside an IFrame created using "react-frame-component" library?
body: <p>I'm trying to render my React component inside an iframe. I got it to work by using the library "react-frame-component". The problem is that the styles are loaded outside the iframe, at the end of "head" element. I want to change it to be loaded inside the "head" of "iframe" element.
  I'm using Webpack to generate the bundles with JS and CSS included and I saw that I can change where "style-loader" will load the styles by setting the option "insertInto", but this is throwing an error:</p>
  
  <pre><code>Uncaught Error: Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.
  </code></pre>
  
  <p>This is my React component:</p>
  
  <pre><code>import Frame from 'react-frame-component'
  ...
  ReactDOM.render(
    &lt;Frame id="someId"&gt;
      &lt;Provider store={Store.get()}&gt;
        &lt;Container/&gt;
      &lt;/Provider&gt;,
    &lt;/Frame&gt;,
    document.body
  );
  </code></pre>
  
  <p>This is my "style-loader" in Webpack configuration:</p>
  
  <pre><code>{
    loader: 'css-loader',
    options: {
      insertInto: () =&gt; document.querySelector("#someId"),
    },
  }
  </code></pre>
  
  <p>I think the problem is that the component was not rendered when webpack tried to include the styles. How to solve this?</p>