title: Webpack compiling CSS into strange classnames
body: <p>I am currently using <code>webpack</code> while developing React app with a NodeJS backend.</p>
  
  <p>I am having trouble with styling the app because it seems webpack trying to do something with my css where it ends up changing the classnames.</p>
  
  <p>For instance in my <code>base.css</code> file I have this:</p>
  
  <pre><code>body {
    background: #ECEFF1;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto;
    padding: 30px;  
    max-width: 980px;
  }
  
  .progress {
    background-color: #FFECB3;
  }
  .progress .indeterminate {
      background-color: #FFC107;
  }
  </code></pre>
  
  <p>Which when I load the page and look in the head is converted to a <code>&lt;style&gt;</code> div with these classnames:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body {
    background: #ECEFF1;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto;
    padding: 30px;  
    max-width: 980px;
  }
  
  .base---progress---1RR8Z {
    background-color: #FFECB3;
  }
  .base---progress---1RR8Z .base---indeterminate---23sZH {
      background-color: #FFC107;
  }
  </code></pre>
  
  <p>So progress styles aren't being picked up on the page because they are changed into this format. How can I avoid this or have React change the class names appropriately?</p>
  
  <hr>
  
  <p>If I removed this from my webpack config:</p>
  
  <pre><code>{
        test: /\.css$/,
        loader: 'style!css?modules&amp;localIdentName=[name]---[local]---[hash:base64:5]'
      }
  </code></pre>
  
  <p>Line it says that it can't find the css file but the path it errors out on is valid.</p>
  
  <hr>
  
  <p>Webpack config for good measure:</p>
  
  <pre><code>'use strict';
  
  var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    devtool: 'eval-source-map',
    entry: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, 'public/app/main.js')
    ],
    output: {
      path: path.join(__dirname, '/dist/'),
      filename: '[name].js',
      publicPath: '/'
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'public/app/index.html',
        inject: 'body',
        filename: 'index.html'
      }),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development')
      })
    ],
    module: {
      loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          "presets": ["react", "es2015", "stage-0", "react-hmre"]
        }
      }, {
        test: /\.json?$/,
        loader: 'json'
      }, {
        test: /\.css$/,
        loader: 'style!css?modules&amp;localIdentName=[name]---[local]---[hash:base64:5]'
      }]
    }
  };
  </code></pre>