title: Webpack split scss into separate css files
body: <p>I'm writing a React application, using webpack and sass. Now i want to try those <a href="https://github.com/css-modules/css-modules" rel="nofollow">CSS Modules</a>, but i've faced some troubles. First, as i understand, i can't use .scss modules, that's why my idea is to convert .scss files to .css files (eg. link.scss -> link.css, main.scss -> main.css, etc.) and then connect them to React component. But i can't make webpack split my .scss files into separate .css files. I've tried different configurations, but all the time i get main.css, which concatenates all .scss files. I guess this is not the best way for me. </p>
  
  <p>So, could you help me to get a correct configuration to split all .scss files to .css. Or maybe there is another way to use .scss modules in my app. Thanks in advance.</p>
  
  <p>This is my webpack configuration</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  module.exports = {
      devtool: 'inline-source-map',
      entry: [
          'webpack-hot-middleware/client',
          './src/index.jsx'
      ],
      output: {
          path: path.join(__dirname, './dist'),
          filename: 'bundle.js',
          publicPath: '/'
      },
      plugins: [
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin(),
          new ExtractTextPlugin("[name].[chunkhash].css", { allChunks: true })
      ],
      module: {
          loaders: [
              {
                  test: /\.jsx$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/,
                  query: {
                      presets: ['react', 'es2015', 'react-hmre']
                  }
              },
              {
                  test: /\.scss$/,
                  loader: ExtractTextPlugin.extract("style-loader", "css!autoprefixer-loader?browsers=last 15 versions!sass")
              },
              {
                  test: /\.css$/,
                  loader: "style!css-loader?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]"
              }
          ]
      }
  }
  </code></pre>
  
  <p>And here is my output in console:</p>
  
  <pre><code>Hash: d1d3f358c1680ba4f634
  Version: webpack 1.13.1
  Time: 4297ms
                          Asset       Size  Chunks             Chunk Names
                      bundle.js     2.5 MB       0  [emitted]  main
  main.582da1db7866d6b8684d.css  373 bytes       0  [emitted]  main
     [0] multi main 40 bytes {0} [built]
      + 324 hidden modules
  Child extract-text-webpack-plugin:
          + 2 hidden modules
  Child extract-text-webpack-plugin:
          + 2 hidden modules
  </code></pre>