title: Configuring CSS modules in development/production with webpack and React
body: <p>How can use CSS modules in production and load standard css file in production?</p>
  
  <p>I am configuring an new application with React using webpack </p>
  
  <p>In <strong>development</strong> I use CSS modules using webpack loaders :</p>
  
  <p>into my .jsx file I import the style file:</p>
  
  <pre><code>import style from './stile.scss';
  export class App extends React.Component {
   render() {
      return (
          &lt;div&gt;
              &lt;div&gt;
                  &lt;span className={style.title}&gt;Ciao&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
   }
  }
  </code></pre>
  
  <p>then I use the following webpack configuration for loaders for my stylesheets: </p>
  
  <pre><code>loaders: [
   {
     test: /\.(scss|css)$/,
    loader: 'style-loader!css-loader?sourceMap&amp;modules&amp;importLoaders=1&amp;localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap'
    }
  ]
  </code></pre>
  
  <p>this way everything works (the style is included in the .js file and classes properly hased)</p>
  
  <p>but in <strong>production</strong>? I should leave the browser render all the classes included in the webpack bundle.js output file? </p>
  
  <p>I would rather create a css file with webpack (and ExtracttextPlugin) with all my style:</p>
  
  <pre><code> {
       test: /\.(css|scss)$/,
       loader: ExtractTextPlugin.extract('css-loader' )
   }
  </code></pre>
  
  <p>and link the .css produced in my index.html</p>
  
  <p>Problem is that now all my classes definitions into the <strong>React components</strong> are no longer rendered in the browser.</p>
  
  <p>How should I solve this?</p>