webpack - compile every scss to css file with same name

Question

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.

Answer 1

The idea of webpack is to put everything that is needed in some JavaScript-files. So it's the intention to not build a css-file for every css-file.

If you want to still use webpack, try this in your webpack config:

module.exports = {
  // ...
  entry: {
    'Main':           './Client/Styles/Main.scss',
    'SomeComponents': './Client/Styles/SomeComponents.scss',
  },
  // ...
}

I have updated the answer after adamo94 noted that he used gulp, so just for everybody else some more information. To convert scss files you need a sass/scss-processor. You can easily call that processor with a single call but as you usually do more with your sources it's likely to use some further processing.
Usually you would use gulp or grunt . Those can be configured to build everything that you need. They have different pros and cons, there are also further tools, but those are probably the ones that you'd like to take a look.