title: Use CSS Modules in React components with Typescript built by webpack
body: <p>I want to use the css-loader with the 'modules' option of webpack in a React application written in Typescript. <a href="https://github.com/css-modules/webpack-demo">This example</a> was my starting point (they are using Babel, webpack and React).</p>
  
  <p>webpack config</p>
  
  <pre><code>var webpack=require('webpack');
  var path=require('path');
  var ExtractTextPlugin=require("extract-text-webpack-plugin");
  
  module.exports={
      entry: ['./src/main.tsx'],
      output: {
          path: path.resolve(__dirname, "target"),
          publicPath: "/assets/",
          filename: 'bundle.js'
      },
      debug: true,
      devtool: 'eval-source-map',
      plugins: [
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.UglifyJsPlugin({minimize: true})
      ],
      resolve: {
          extensions: ['', '.jsx', '.ts', '.js', '.tsx', '.css', '.less']
      },
      module: {
          loaders: [
              {
                  test: /\.ts$/,
                  loader: 'ts-loader'
              },
              {
                  test: /\.tsx$/,
                  loader: 'react-hot!ts-loader'
              }, {
                  test: /\.jsx$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: "react-hot!babel-loader"
              },
              {
                  test: /\.js$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: "babel-loader"
              }, {
                  test: /\.css/,
                  exclude: /(node_modules|bower_components)/,
                  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
              }
          ]
      },
      plugins: [
          new ExtractTextPlugin("styles.css", {allChunks: true})
      ],
      postcss: function() {
          return [require("postcss-cssnext")()]
      }
  }
  </code></pre>
  
  <p>This is a React component I want to style with an accompanying CSS file:</p>
  
  <pre><code>import React = require('react');
  import styles = require('../../../css/tree.css')
  
  class Tree extends React.Component&lt;{}, TreeState&gt; {
  ...
  
      render() {
          var components = this.state.components
          return (
              &lt;div&gt;
                  &lt;h3 className={styles.h3} &gt;Components&lt;/h3&gt;
                  &lt;div id="tree" className="list-group"&gt;
                      ...
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
      export = Tree
  </code></pre>
  
  <p>tree.css</p>
  
  <pre><code>.h3{
      color: red;
  }
  </code></pre>
  
  <p>No matter what I'm doing (tried changing the import syntax, tried declaring the 'require' for ts-loader, described <a href="https://github.com/TypeStrong/ts-loader#loading-other-resources-and-code-splitting">here</a>, I always get:</p>
  
  <blockquote>
    <p>Uncaught Error: Cannot find module "../../../css/tree.css"</p>
  </blockquote>
  
  <p>at runtime and </p>
  
  <blockquote>
    <p>error TS2307: Cannot find module '../../../css/tree.css'.</p>
  </blockquote>
  
  <p>by the TS compiler. Whats happening? Seems to me that css-loader is not even emitting ICSS? Or is it ts-loader behaving wrong?</p>