title: Angular 2 component css position
body: <p>I want to load component css in a specific order. I've got this component :</p>
  
  <pre><code>@Component({
      selector: '[select2]',
      styleUrls: [
          "assets/plugins/select2/css/select2.min.css", 
          "assets/plugins/select2/css/select2-bootstrap.min.css"],
      encapsulation: ViewEncapsulation.None
  })
  export class Select2Component { }
  </code></pre>
  
  <p>and this is what I get, when I'm using it:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="angular.js"&gt;&lt;/script&gt;&lt;!-- 2. Configure SystemJS--&gt;
      &lt;script src="base.js"&gt;&lt;/script&gt;
      &lt;script src="components.js"&gt;&lt;/script&gt;
      &lt;script src="/assets/plugins/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="/assets/plugins/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- BEGIN GLOBAL MANDATORY STYLES--&gt;
      &lt;link href="/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
      &lt;!-- END GLOBAL MANDATORY STYLES--&gt;
      &lt;!-- BEGIN THEME GLOBAL STYLES--&gt;
      &lt;link href="/assets/css/global/plugins.css" rel="stylesheet" type="text/css"&gt;
      &lt;!-- END THEME GLOBAL STYLES--&gt;
      &lt;script&gt;System.import('boot').catch(console.error.bind(console));&lt;/script&gt;
      &lt;style&gt; contents of "assets/plugins/select2/css/select2.min.css" &lt;/style&gt;
      &lt;style&gt; contents of "assets/plugins/select2/css/select2-bootstrap.min.css"&lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>The question is, can I set position where to load component styles? In this case I want them to load right before <code>&lt;!-- BEGIN THEME GLOBAL STYLES--&gt;</code>, not at the end of the head, because my <code>plugins.css</code> overrides some <code>select2.css</code> rules.</p>
  
  <p>The result would be:</p>
  
  <pre><code>...
  &lt;!-- END GLOBAL MANDATORY STYLES--&gt;
  &lt;style&gt; contents of "assets/plugins/select2/css/select2.min.css" &lt;/style&gt;
  &lt;style&gt; contents of "assets/plugins/select2/css/select2-bootstrap.min.css"&lt;/style&gt;
  &lt;!-- BEGIN THEME GLOBAL STYLES--&gt;
  ...
  </code></pre>