title: webpack - compile every scss to css file with same name
body: <p>I'd like to have structure like this</p>
  
  <pre><code>-Styles
      --Main.scss
      --SomeComponent.scss
  -CompiledStyles
      --Main.css
      --SomeComponent.css
  </code></pre>
  
  <p>Actually I can only do this</p>
  
  <pre><code>-Styles
      --Main.scss
      --SomeComponent.scss
      --All.scss  (import all scss from file)
  -CompiledStyles
      --Main.css ( all css)
  </code></pre>
  
  <p>This is my webpack config</p>
  
  <pre><code>var Path = require('path');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var extractCSS2 = new ExtractTextPlugin('[name].css');
  
   module.exports = {
      devtool: 'eval',
      entry: './Client/Styles/All.scss',
      output: {
          path: Path.join(__dirname, 'CompiledStyles'),
          filename: 'page.js',
          publicPath: '/CompiledStyles/'
      },
      module: {
          loaders: [
              {
                  test: /\.scss$/,
                  loader: extractCSS2.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
              },
              {
                  //IMAGE LOADER
                  test: /\.(jpe?g|png|gif|svg)$/i,
                  loader: 'file-loader'
              },
              {
                  test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                  loader: 'file-loader?name=fonts/[name].[ext]'
              }
          ]
      },
      plugins: [
          extractCSS2
      ]
  };
  </code></pre>
  
  <p>Is it possible to compile this scss files to single css files ?
  I really don't know how to manage this case. I've tried to assign entry: './Client/Styles' but it occures error.</p>
  
  <p>EDIT: </p>
  
  <p>I solved this with gulp. </p>