Reloading extracted css with hot module replacement

[nickdima]

Is it possible to have hot module replacement for an extracted css file that I load via a css link tag in my html's head tag?
I have HMR working for my javascript but not sure how to make it work for extracted css.
This is my css related config:

entry:
    styles: ['webpack-dev-server/client?http://localhost:3001', 'webpack/hot/dev-server', './app.scss']
loaders: [
  {
    test: /\.scss$/
    loader: ExtractTextPlugin.extract "style-loader", "css-loader!sass-loader?" + JSON.stringify
      outputStyle: 'expanded'
      includePaths: [
        path.resolve __dirname, './app'
        path.resolve __dirname, './bower_components'
        require('node-bourbon').includePaths
        path.resolve __dirname, './vendor/css'
      ]
  }
plugins: [new ExtractTextPlugin "css/#{nameBundle}.css"]

[andreypopp]

Why use extract-text-webpack-plugin in development when you can use just css-loader + style-loader which can do HMR?

[nickdima]

Good point! :)
Thanks, I'll give it a try.

[nickdima]

@andreypopp how do you handle dev/production configuration changes? Just curious how other people do it, I'm using the NODE_ENV variable.

[andreypopp]

@nickdima just if (process.env.NODE_ENV === 'production') { ... }

[nickdima]

@andreypopp it seems that if I require my css from my main js entry point the HMR works, but not if I want to have it as a separate bundle and load it via a script tag.
Any ideas?

[nickdima]

These are my entries:

entry:
  common: ['webpack-dev-server/client?http://localhost:3001', 'webpack/hot/dev-server', './client.coffee']
  styles: ['webpack-dev-server/client?http://localhost:3001', 'webpack/hot/dev-server','./app.scss']

If I leave only each one of them HMR works for any of them, but if I put them both HMR works only for common.
This is how the log from the browser's consoles looks like when making a css change:

[sokra]

We need to change this https://github.com/webpack/webpack/blob/master/hot/dev-server.js#L39

window.onmessage = function(event) {

to something like addEventListener...

Do you want to send a PR?

[nickdima]

I'll take a look. I'm a bit in the dark there, just starting out with HMR :)

[sokra]

as workaround you can do:

entry:
  common: ['webpack-dev-server/client?http://localhost:3001', 'webpack/hot/dev-server', 
             './app.scss', './client.coffee']

Best is to use only one entry per HTML page...

[nickdima]

My goal is to have the css as a separate bundle so I can load it in the head. My html is generated server side and the javascript loaded just before closing the body tag.
I could just load everything in the head in development, but I don't want to change things to much between dev and prod. There would be just too many places to check for the env variable, so I was looking for a cleaner solution to my scenario.

[nickdima]

@sokra I investigated the problem and now I see what you're saying about window.onmessage, it gets overwritten by the last loaded bundle.
I've made a test with addEventListener and it seems to work. I'll prepare a PR.