title: How to use CSS Modules with webpack in React isomorphic app?
body: <p>I am build an isomorphic app using react, react-router, express and webpack. Now I want to use css modules to import css.</p>
  
  <p>I use <code>import './index.css'</code> in <code>index.jsx</code>, it works fine on client, but doesn't work on server rendering. The error is <code>Error: Cannot find module './index.css'</code>.</p>
  
  <p><strong>components/index.jsx</strong></p>
  
  <pre><code>import React, {Component, PropTypes} from 'react';
  import style from './index.css';
  
  class App extends Component {
      constructor(props, context) {
          super(props, context);
      }
  
      render() {
          return (
              &lt;div id="login"&gt;
                   // ...
              &lt;/div&gt;
          );
      }
  };
  
  export default App;
  </code></pre>
  
  <p><strong>server/router/index.js</strong></p>
  
  <pre><code>import url from 'url';
  import express from 'express';
  import swig from 'swig';
  import React from 'react';
  import {renderToString} from 'react-dom/server';
  import {match, RouterContext} from 'react-router';
  
  import routes from '../../client/routes/routes';
  import DataWrapper from '../../client/container/DataWrapper';
  import data from '../module/data';
  
  const router = express.Router();
  
  router.get('*', async(req, res) =&gt; {
    match({
      routes,
      location: req.url
    }, async(error, redirectLocation, props) =&gt; {
      if (error) {
        res.status(500).send(error.message);
      } else if (redirectLocation) {
        res.status(302).redirect(redirectLocation.pathname + redirectLocation.search);
      } else if (props) {
        let content = renderToString(
          &lt;DataWrapper data={data}&gt;&lt;RouterContext {...props}/&gt;&lt;/DataWrapper&gt;
        );
        let html = swig.renderFile('views/index.html', {
          content,
          env: process.env.NODE_ENV
        });
        res.status(200).send(html);
      } else {
        res.status(404).send('Not found');
      }
    });
  });
  
  export default router;
  </code></pre>
  
  <p><strong>webpack.config.dev.js</strong>(for webpack-dev-server)</p>
  
  <pre><code>var webpack = require('webpack');
  var config = require('./config');
  
  module.exports = {
      devtool: 'inline-source-map',
      entry: [
          'webpack-dev-server/client?http://localhost:' + config.webpackPort,
          'webpack/hot/only-dev-server',
          './src/client/entry',
      ],
      output: {
          path: __dirname + '/public/js',
          filename: 'app.js',
          publicPath: 'http://localhost:' + config.webpackPort + '/public/js',
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin(),
          new webpack.DefinePlugin({
              "process.env": {
                  NODE_ENV: JSON.stringify('development')
              }
          })
      ],
      resolve: {
          extensions: ['', '.js', '.jsx', '.css']
      },
      module: {
          loaders: [{
              test: /\.jsx?$/,
              loader: 'react-hot',
              exclude: /node_modules/
          }, {
              test: /\.jsx?$/,
              loader: 'babel-loader',
              exclude: /node_modules/
          }, {
              test: /\.css$/,
              loader: 'style-loader!css-loader?modules',
              exclude: /node_modules/
          }, {
              test: /\.(png|woff|woff2|svg|ttf|eot)$/,
              loader: 'url-loader',
              exclude: /node_modules/
          }]
      }
  }
  </code></pre>