Webpack hot module replacement: css without refresh

webpackwebpack-dev-server

So far I've been using livereload so that whenever I change JS or templates, the page refreshes, and when I change CSS, it would hotswap the new CSS without a refresh.

I'm trying out webpack now and nearly got to the same behaviour, with one exception: when the CSS changes, it refreshes the whole window. Is it possible to make it hotswap the CSS without refresh?

Config so far:

var webpackConfig = {
    entry: ["webpack/hot/dev-server", __dirname + '/app/scripts/app.js'],
    debug: true,
    output: {
        path: __dirname + '/app',
        filename: 'scripts/build.js'
    },
    devtool: 'source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: __dirname + '/app/index.html',
            inject: 'body',
            hash: true,
            config: config
        }),
        new webpack.ProvidePlugin({
            'angular': 'angular'
        }),
        new ExtractTextPlugin("styles.css")
    ],
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: "style!css!sass?includePaths[]=" + __dirname + "/app/bower_components/compass-mixins/lib&includePaths[]=" + __dirname + '/instance/sth/styles&includePaths[]=' + __dirname + '/app/scripts'
            }
        ]
    }
};

Best Solution

This is one of the downsides of using ExtractTextPlugin as stated in the project README. You can resolve the issue by splitting up your configuration. Ie. have separate configuration for development without it and one for production with it.