title: Material-web-component scss build
body: <p>I'm fairly new to webpack, but I'm not sure if this is a configuration problem or not. My build fails because of an error in my scss, or (material-web-compenents itself). When I try to build webpack throws this error: </p>
  
  <pre><code>ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./client/styles.scss
  Module build failed:
  undefined
                                               ^
        Argument `$color` of `red($color)` must be a color
  </code></pre>
  
  <p>My config file:</p>
  
  <pre><code>/*
      ./webpack.config.js
  */
  const path = require('path');
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './client/index.html',
    filename: 'index.html',
    inject: 'body'
  })
  
  module.exports = {
    entry: './client/index.js',
    plugins: [HtmlWebpackPluginConfig],
    output: {
      path: path.resolve('dist'),
      filename: 'index_bundle.js'
    },
    module: {
      loaders: [
        { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
        { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
        {
            test: /\.scss$/,
            loaders: ["style-loader", "css-loader", "sass-loader"]
        }]
    }
  }
  </code></pre>
  
  <p>It will build if I remove all my variables. The stack trace shows it originating from the mdc components.
  SCSS file:</p>
  
  <pre><code>$mdc-theme-primary: #37474F !default;
  $mdc-theme-primary-light: mdc-theme-light-variant($mdc-theme-primary) !default;
  $mdc-theme-primary-dark: mdc-theme-dark-variant($mdc-theme-primary) !default;
  $mdc-theme-secondary: #B0BEC5 !default;
  
  @import "~@material/theme/mdc-theme";
  </code></pre>