title: Load CSS from different folder in react
body: <p>I am working on a react project and here is my folder structure: I want to load my <code>example.css</code> which is in different folder inside <code>index.js</code></p>
  
  <pre><code>templates
    --src
      --index.js
      --index.html
  
  static
    --css
        --example.css
    --images
    --etc
  </code></pre>
  
  <h2>webpack.config.js</h2>
  
  <pre><code>var debug = process.env.NODE_ENV !== "production";
  var webpack = require('webpack');
  
  config = {
    context: __dirname,
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./src/index.js",
    output: {
      path: "../../static/webpack_build",
      filename: "bundle.js"
    },
    plugins: [
      new webpack.DefinePlugin({ // &lt;-- key to reducing React's size
        'process.env': {
          'NODE_ENV': JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin(), //minify everything
      new webpack.optimize.AggressiveMergingPlugin()//Merge chunks
    ],
    module: {
           loaders: [{
                   test: /\.js$/,
                   exclude: /node_modules/,
                   loader: 'babel-loader',
                   query:
                        {
                          presets:['es2015', 'react']
                        }
               },
               {
                   test: /\.css$/,
                   loader: 'style-loader!css-loader'
               }
               ]
           },
    };
  
  module.exports = config;
  </code></pre>
  
  <h2>index.js</h2>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import styles from '../../static/css/affman.css'
  
  
  ReactDOM.render(
      &lt;h1&gt;Offer wall new version coming soon!&lt;/h1&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>When I try to bundle this using <code>webpack</code> it gives module not found error.</p>
  
  <pre><code>ERROR in ./src/index.js
  Module not found: Error: Can't resolve '../../static/css/affman.css' in '/home/kishan/mobifly/mobifly_mediation_engine/templates/frontend_mobifly/src'
   @ ./src/index.js 11:14-50
  </code></pre>