Does not work when the entry configuration is an object.

[TimotheeJeannin]

The extract-loader works great when I use the single entry syntax in my webpack configuration:

entry: [
  './js/main.js', 
  './scss/theme.scss'
]

But as soon as I change it to the object syntax as described in the documentation

entry: {
  main: './js/main.js',
  theme: './scss/theme.scss'
}

hot reload doesn't work anymore.

It may be related to the fact that the generated file is theme.css instead of main.css ?

I'm not using hashes and the <style> tag correctly points to the generated css file.

Here is my webpack configuration:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        main: './js/main.js',
        theme: './scss/theme.scss'
    },
    output: {
        path: path.resolve(__dirname, './static'),
        publicPath: '/static/',
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /theme.scss$/,
                use: ['extracted-loader'].concat(ExtractTextPlugin.extract({use: ['css-loader', 'sass-loader']})),
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
        }),
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    externals: {
        jquery: 'jQuery',
        popper: 'Popper',
        bootstrap: 'jQuery'
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true,
        proxy: {"/": {target: "http://localhost:8000"}}
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
};

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
} else if (process.env.NODE_ENV === 'development') {
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.NamedModulesPlugin()
    ]);
}