title: classnames not appearing React
body: <p>Not Sure where am i going wrong.This is my webpack.prod for bundling client-side. but some how classNames are not appearing in my html</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const dependencies = require('./package.json');
  const ManifestPlugin = require('webpack-manifest-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  const VENDOR_LIBS = [];
  Object.entries(dependencies.dependencies).forEach(([key, value]) =&gt; {
    VENDOR_LIBS.push(key);
  });
  
  const BrowserConfig = {
    entry: {
      bundle: './src/index',
      vendor: VENDOR_LIBS,
    },
    output: {
      path: path.resolve('./dist'),
      publicPath: '/',
      filename: '[name].js',
      pathinfo: true,
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json', '.scss', '.css'],
    },
    module: {
      rules: [
        {
          use: ['react-hot-loader/webpack', 'babel-loader'],
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
        },
        {
          test: /\.(woff|woff2|eot|ttf|svg|otf)$/,
          use: 'file-loader?limit=1024&amp;name=fonts/[name].[ext]',
        },
        {
          test: /\.(gif|jpe?g|png|ico)$/,
          loader: ['file-loader?name=images/[name].[ext]&amp;limit=100000'],
        },
        {
          test: /\.(scss|css)$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              { loader: 'css-loader',
                options: {
                  sourceMap: true,
                  camelCase: true,
                  minimize: true,
                  namedExport: true,
                  modules: true,
                  importLoaders: 2,
                  localIdentName: '[hash:base64:5]',
                },
              },
              { loader: 'postcss-loader',
                options: {
                  sourceMap: true,
                  plugins: () =&gt; ([
                    require('autoprefixer')({
                      browsers: ['last 2 versions', 'ie &gt;= 9'],
                    }),
                  ]),
                },
              },
              // { loader: 'sass-loader', options: { sourceMap: true } },
            ],
          }),
        },
      ],
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.CommonsChunkPlugin({
        name: ['vendor'],
      }),
      new CleanWebpackPlugin(['dist']),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.optimize.AggressiveMergingPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        },
        BROWSER: true,
        DEBUG: false,
        __DEVTOOLS__: false,
      }),
      new ManifestPlugin({
        fileName: './manifest.json',
      }),
      new ExtractTextPlugin({
        filename: '[name].css',
        allChunks: true,
      }),
    ],
    devServer: {
      contentBase: './dist',
      hot: true,
      historyApiFallback: true,
    },
    devtool: 'source-map',
  };
  
  module.exports = BrowserConfig;
  </code></pre>
  
  <p>This is header.js file where in, i have imported styles from header.scss file.</p>
  
  <pre><code>import React, { Component } from 'react';
  import styles from './header.scss';
  
      class Header extends Component {
        render() {
          return (
            &lt;div className={ styles.headerContainer }&gt;This is Header&lt;/div&gt;
          );
        }
      }
  
      export default Header;
  </code></pre>
  
  <p>header.scss file consists of the following code:</p>
  
  <pre><code>.headerContainer{
    border: 1px solid #ddd;
  }
  </code></pre>
  
  <p>This is screenshot of my console where in classes are not appearing.
  <a href="https://i.stack.imgur.com/Yw5tx.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>i have included the following dependencies in my package.json</p>
  
  <pre><code>{
    "name": "wander",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "NODE_ENV='development' webpack --config='webpack.server.js' &amp;&amp; node dist/serverdist.js",
      "build": "NODE_ENV='production' webpack -p --config='webpack.prod' &amp;&amp; NODE_ENV='production' webpack -p --config='webpack.server' &amp;&amp; node dist/serverdist.js"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "history": "^4.7.2",
      "react": "^16.0.0",
      "react-dom": "^16.0.0",
      "react-redux": "^5.0.6",
      "react-router": "^4.2.0",
      "react-router-dom": "^4.2.2",
      "redux": "^3.7.2"
    },
    "devDependencies": {
      "autoprefixer": "^7.1.5",
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-plugin-css-modules-transform": "^1.2.7",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-0": "^6.24.1",
      "babel-preset-stage-1": "^6.24.1",
      "clean-webpack-plugin": "^0.1.17",
      "compression-webpack-plugin": "^1.0.1",
      "css-loader": "^0.28.7",
      "eslint": "^4.8.0",
      "eslint-config-airbnb": "^15.1.0",
      "eslint-plugin-import": "^2.7.0",
      "eslint-plugin-jsx-a11y": "^6.0.2",
      "eslint-plugin-react": "^7.4.0",
      "express": "^4.16.1",
      "extract-text-webpack-plugin": "^3.0.0",
      "file-loader": "^1.1.4",
      "html-webpack-plugin": "^2.30.1",
      "json-loader": "^0.5.7",
      "node-sass": "^4.5.3",
      "postcss-loader": "^2.0.6",
      "react-hot-loader": "^3.0.0-beta.7",
      "sass-loader": "^6.0.6",
      "style-loader": "^0.18.2",
      "url-loader": "^0.5.9",
      "webpack": "^3.6.0",
      "webpack-bundle-analyzer": "^2.9.0",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-hot-middleware": "^2.19.1",
      "webpack-manifest-plugin": "^1.3.2",
      "webpack-node-externals": "^1.6.0"
    }
  }
  </code></pre>
  
  <p>on serverside i have code like this;</p>
  
  <pre><code>app.use(express.static('dist'));
  
  app.get('*', (req, res) =&gt; {
    if (process.env.NODE_ENV === 'production') {
      res.send(`
        &lt;!DOCTYPE html&gt;
        &lt;head&gt;
          &lt;title&gt;Wander Blog&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="/bundle.css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div id='app'&gt;${renderToString(&lt;App /&gt;)}&lt;/div&gt;
          &lt;script type="text/javascript" src="/vendor.js" defer&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/bundle.js" defer&gt;&lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    `);
    }
  });
  </code></pre>