title: Loading scss files in Storybook & Angular: expected 1 selector or at-rule, was "var content = requi"
body: <p>I'm trying to setup storybook for my angular project. However, when trying to setup the first story for a component, i got the following error:</p>
  
  <pre><code>ERROR in ./src/app/modules/ka-basic-components/ka-button/ka-button.component.scss
  Module build failed:
  @import '~styles/helpers/variables';
  ^
    File to import not found or unreadable: ~styles/helpers/variables.
  </code></pre>
  
  <p>I then added a webpack config with the following rules:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    module: {
      rules: [{
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader', 'sass-loader'],
          include: path.resolve(__dirname, '../')
        },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
          include: __dirname
        },
        {
          test: /\.(woff|woff2)$/,
          use: {
            loader: 'url-loader',
            options: {
              name: 'fonts/[hash].[ext]',
              limit: 5000,
              mimetype: 'application/font-woff'
            }
          }
        },
        {
          test: /\.(ttf|eot|svg|png)$/,
          use: {
            loader: 'file-loader',
            options: {
              name: 'fonts/[hash].[ext]'
            }
          }
        }
      ]
    }
  };
  </code></pre>
  
  <p>Now, i get the following error:</p>
  
  <pre><code>ERROR in ./src/app/modules/ka-basic-components/ka-button/ka-button.component.scss
  Module build failed:
  @import '~styles/helpers/variables';
  ^
        Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
  </code></pre>
  
  <p>My researched showed this error commonly means that there exist multiple tests for .scss, however i don't have any other webpack configs. I'm using the default storybook configs and this is my index.stories.ts:</p>
  
  <pre><code>import { storiesOf } from '@storybook/angular';
  import { text, boolean } from '@storybook/addon-knobs';
  import { KaButtonComponent } from '../app/modules/ka-basic-components/ka-button/ka-button.component';
  
  storiesOf('Button', module).add('Primary', () =&gt; ({
      component: KaButtonComponent,
      props: {
          text: text('text', 'Button text'),
          disabled: boolean('disabled', true)
      },
      moduleMetadata: {}
  }));
  </code></pre>
  
  <p>Does anybody have any idea where this error could come from and how i can fix it? Thanks!</p>