Webpack separate .css file for each .scss file?

Question

css

Good afternoon. I searched a lot on Google for information on this issue, however, I could not find anything worthwhile.
In short, I'm doing a project on React. The project uses SASS for styles. And then I thought that it would be nice to implement CSS Modules . I tried it, everything works, however, I don’t want to refuse SASS. Googled on this topic, did not find something like SASS Modules. As a solution, it is proposed to use ExtractTextWebpackPlugin , however, there is also a problem with it. It merges all .scss files into one and makes style.css out of them. This is inconvenient, because I want my own small modular .css file for each component.
The question actually is that maybe someone knows how to tell this plugin to make not one big style.css, but create its own .css for each .scss file. Thanks in advance.
At the moment, the webpack config looks like this:

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].css")
    ],
    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&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"
            }
        ]
    }
}

Answer 1

And how will you then connect a lot of .css? You still need to merge everything into 1 file at the output, but for your question, google css-loader and postcss postcss-precss with react, it's very cool. By the way, you have almost everything set up.

Answer 2

theWaR_13 Defeated this question?