title: How to use Angular 4 with SASS
body: <p>I'm starting my first project using <code>Angular4</code> and <code>sass</code> and I'm trying to figure it out how to work with <code>sass</code> the proper way. I'm using <code>angular-cli</code> and already set the default style to use <code>scss</code> syntax. I also already defined the compilation, etc.</p>
  
  <p>However I saw that we have an option styleUrls on the component, where in some cases we define styles used only in that component.</p>
  
  <p>The problem is, when I set a <code>scss</code> file in that <code>component</code> it's not generating it's own <code>.css</code> file neither being included in the main <code>.css</code> file, generated from the root project.</p>
  
  <p>So basically I have a project structure like this:</p>
  
  <pre><code>app
      app.module.ts
      app.routing.ts
      home
          home.component.ts
          home.html
          _home.scss
      client
          client.component.ts
          client.html
          _client.scss
  scss
      _imports.scss
      colors
          _colors.scss
      ui
          _button.scss
          _table.scss
      //.. more folder and files
  styles.scss
  index.html
  </code></pre>
  
  <p>And I'd like to be able to set the main <code>css</code> style within the <code>styles.scss</code> file, which will be inserted into the <code>index.html</code> file later, on the build process. But also be able to generate a single <code>css</code> file for each component I have, e.g. <code>home</code> and <code>client</code>, and only use those <code>css</code> styles within their own <code>component</code>.</p>
  
  <p>Is it possible to do it? I've tried to do it and I didn't find any other resource about this!</p>