webpack - compile every scss to css file with same name

I'd like to have structure like this

-Styles
    --Main.scss
    --SomeComponent.scss
-CompiledStyles
    --Main.css
    --SomeComponent.css

Actually I can only do this

-Styles
    --Main.scss
    --SomeComponent.scss
    --All.scss  (import all scss from file)
-CompiledStyles
    --Main.css ( all css)

This is my webpack config

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
    ]
};

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.

EDIT:

I solved this with gulp.