title: Sass with webpack not working
body: <p>I'm building an app using webpack, react, babel, and Sass. I've been trying to get Sass working, but it's not playing ball. It's not throwing any errors, it just doesn't seem to be compiling properly, and when I examine the element in Dev Tools, it simply says "invalid property value" where I've referenced a variable. Is there something glaringly obvious I'm doing wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/ZSkYC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZSkYC.png" alt="My file structure"></a></p>
  
  <p>My app.scss:</p>
  
  <pre><code>@import '../../../node_modules/normalize.css/normalize.css';
  @import '../variables.scss';
  
  /*
   * Base styles
   * ========================================================================== */
  
  *,
  *:after,
  *:before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
  }
  
  body {
      text-align: center;
      margin: 0;
  }
  
  p {
      color: $blue;
  }
  </code></pre>
  
  <p>My variables.scss:</p>
  
  <pre><code>/*
   * Colors
   * ========================================================================== */
  
  $blue: #334c6a;
  $yellow: #f6d463;
  $white: #ffffff;
  $black: #000000;
  
  /*
   * Typography
   * ========================================================================== */
  
  $font-family-base:      'Segoe UI', 'HelveticaNeue-Light', sans-serif;
  
  /*
   * Layout
   * ========================================================================== */
  
  $container-margin: 55px;
  </code></pre>
  
  <p>Webpack.config:</p>
  
  <pre><code>var path = require("path");
  var webpack = require("webpack");
  var autoprefixer = require('autoprefixer');
  var precss = require('precss');
  
  module.exports = {
    entry: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    output: {
      path: path.resolve(__dirname, 'build'),
      publicPath: '/build/',
      filename: "bundle.js"
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.png', '.json']
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.LoaderOptionsPlugin({
        options: {
          context: __dirname,
          postcss: [
            autoprefixer
          ]
        }
      })
    ],
    module: {
        rules: [
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loaders: ['react-hot-loader', 'babel-loader']
       },
       {
         test: /\.scss$/,
         loaders: ['style-loader', 'css-loader', 'postcss-loader']
       },
       {
         test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
         loader: 'url-loader?limit=10000',
       },
       {
         test: /\.css$/,
         use: [ 'style-loader', 'css-loader' ]
       }
     ]
    }
  };
  </code></pre>
  
  <p>Package.json:</p>
  
  <pre><code>{
    "name": "test",
    "version": "1.0.0",
    "description": "test",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack-dev-server"
    },
    "author": "test",
    "license": "ISC",
    "devDependencies": {
      "autoprefixer": "^6.7.7",
      "babel-core": "^6.24.1",
      "babel-loader": "^6.4.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-0": "^6.24.1",
      "css-loader": "^0.28.0",
      "file-loader": "^0.11.1",
      "node-sass": "^4.5.2",
      "postcss": "^5.2.17",
      "postcss-loader": "^1.3.3",
      "precss": "^1.4.0",
      "react-hot-loader": "^1.3.1",
      "style-loader": "^0.16.1",
      "webpack": "^2.3.3",
      "webpack-dev-server": "^2.4.2"
    },
    "dependencies": {
      "normalize.css": "^6.0.0",
      "react": "^15.5.4",
      "react-dom": "^15.5.4"
    }
  }
  </code></pre>