title: Make Angular inline global styles
body: <p>How do I configure Angular 2 to inline/inject global styles into a <code>&lt;style&gt;</code> tag in <code>&lt;head&gt;</code>?</p>
  
  <p>Running <code>ng new site</code> and then <code>ng serve --prod</code> serves up a page with a <code>&lt;link href="styles.x.bundle.css" rel="stylesheet"/&gt;</code> tag in <code>&lt;head&gt;</code>. Not inlined.</p>
  
  <p>If I use <code>ng serve --prod --extract-css=false</code> then the styles are packed into a <code>styles.x.bundle.js</code> file which is loaded via a <code>&lt;script&gt;</code> tag at the end. Still not inlined.</p>
  
  <p>But I want the CSS to be inlined/injected directly into the <code>&lt;head&gt;</code>.</p>
  
  <hr>
  
  <p>Edit: Note I would still like to maintain a separate styles file (so I have the option of using SASS).</p>