title: Angular Webpack SASS "Unknown word" issue
body: <p>I have an issue when using SASS interpolation inside an <code>.scss</code> file in an Angular 2 application.</p>
  
  <p><strong>Webpack Config</strong></p>
  
  <pre><code>loaders: [
      {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader', 'postcss-loader']
      },
      ...
  ],
  postcss: [autoprefixer({ browsers: ['last 2 versions', '&gt; 5%'] })]
  
  ...
  </code></pre>
  
  <p><strong>Sample Code that results in an error</strong></p>
  
  <pre><code>$attr-name: border;
  .test {
      #{$attr-name}-color: blue;
  }
  </code></pre>
  
  <p><strong>Resulting Error</strong></p>
  
  <p><a href="https://i.stack.imgur.com/BPr7U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BPr7U.png" alt="enter image description here"></a></p>
  
  <p>If I remove the interpolation (i.e. <code>#{...}</code>) I don't get the error. I've tried to find out what's the problem but I couldn't find anyone that had the same problem as me.</p>