title: How to load styles onto React server-side using Webpack and go back to style-loader client-side?
body: <p>My goal is to render CSS into a style tag server-side similar or exactly how the <code>style-loader</code> plugin would do it client-side. I know this is impossible because <code>style-loader</code> writes directly to the DOM and the DOM doesn't exist in Node.js.</p>
  
  <p>Currently I'm using the ExtractTextPlugin, but if I don't have it compile all CSS into one big file, it's gonna miss some styles when the page loads unless I'm running Webpack on the server and not compiling it outright.</p>
  
  <p>I've got this code rendering the page:</p>
  
  <p><strong>server.jsx</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const renderedContent = renderToString(
      &lt;Provider store={store} history={history}&gt;
          &lt;RoutingContext {...renderProps} /&gt;
      &lt;/Provider&gt;
  )
  
  const finalState = store.getState()
  const renderedPage = renderFullPage(renderedContent, finalState)
  </code></pre>
  
  
  
  <p><strong>render-full-page.jsx</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = function renderFullPage(renderedContent = undefined, state = {}) {
      return '&lt;!DOCTYPE html&gt;' + renderToStaticMarkup(
          &lt;html lang="en"&gt;
          &lt;head&gt;
              &lt;meta charSet="utf-8" /&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
              {typeof __production !== 'undefined' &amp;&amp; __production === true &amp;&amp; &lt;link id="css" rel="stylesheet" href="/main.css" /&gt;}
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="root"&gt;&lt;div dangerouslySetInnerHTML={{__html: renderedContent}}&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;script dangerouslySetInnerHTML={{__html: 'window.__INITIAL_STATE__ =' + JSON.stringify(state)}} /&gt;
              &lt;script src="/bundle.js"&gt;&lt;/script&gt;
          &lt;/body&gt;
          &lt;/html&gt;
      )
  }
  </code></pre>
  
  
  
  <p>I am importing styles globally when I need them in my React modules like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>import './../../assets/styl/flex-video'
  </code></pre>
  
  
  
  <p>And I'd like to change how I'm loading CSS to put all CSS into a var I can loop through and output <code>&lt;style&gt;</code> tags the same way <code>style-loader</code> does it like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>{typeof __production !== 'undefined' &amp;&amp; __production === true &amp;&amp; cssFiles.map((styles) =&gt; {
      &lt;style&gt;{styles}&lt;/style&gt;
  })}
  </code></pre>
  
  
  
  <p>Is this possible in Webpack? Is there a plugin like <code>isomorphic-style-loader</code> that's capable of doing this? If so, how would I modify my code?</p>