title: How to print critical CSS into index.html using Webpack?
body: <p>I'm working on a large single-page application, with very large CSS &amp; JS files that are generated by Webpack, which causes a <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content" rel="nofollow noreferrer">flash of unstyled content</a> when the app is initially loaded.</p>
  
  <p>To avoid that, I would like to print the critical part of the CSS into the head of the document, so that the document will not appear unstyled while the browser is processing the rest of the JS &amp; CSS. </p>
  
  <p>This CSS is written in SASS, and is dependant on global app variables, so webpack must process the files to compile them from SASS to CSS before printing it to the document head.</p>
  
  <p>How can this be done with Webpack?</p>