title: How to change the Angular Material 2 CSS imports order?
body: <p>On an Angular 2 app, built with <a href="https://github.com/angular/angular-cli" rel="noreferrer">Angular CLI</a>, I've set up the <a href="https://github.com/angular/material2" rel="noreferrer">Angular 2 Material components</a> following the <a href="https://github.com/angular/material2/blob/master/guides/getting-started.md" rel="noreferrer">official installation guide</a>.</p>
  
  <p>Angular 2 Material is placing its main CSS styles in the page <code>&lt;head&gt;</code> always <strong>below</strong> my custom CSS styles. Which creates implications on my side if I need to override them.</p>
  
  <p>How can I force Angular 2 Material to place its core CSS styles <strong>above</strong> the styles which I defined inside my Angular CLI main (entry) CSS file?</p>
  
  <p><a href="https://i.stack.imgur.com/V0X8J.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V0X8J.png" alt="enter image description here"></a></p>