title: How to use SASS/SCSS in angular application
body: <p>I am trying to build a color theme functionality in angular2 application using sass. My header.component.scss file is:</p>
  
  <pre><code>$head-color: #f11;
  h1{
      color: $head-color;
  }
  </code></pre>
  
  <p>I have created a file webpack.common.js in root directory and added the following in it:</p>
  
  <pre><code>const webpack = require('webpack');
  module.exports = {
    module: {
      loaders: [
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader']
        }
      ]
    }
  };
  </code></pre>
  
  <p>My header is being displayed in default black color. However if i change the scss file to following then its displayed in red color.</p>
  
  <pre><code>h1{
      color: #f11;
  }
  </code></pre>
  
  <p>So basically I am not able to assign dynamic value to variables. Anyone having some idea about this pls share.  TIA</p>