Add support for hot-reloading of styles

[empz]

Currently if you change something in ClientApp/css/site.css in the ReactRedux template while the app is running the change is not reflected until you do a full refresh.

The console ouputs the following:

According to the extract-text-webpack-plugin docs, it does not support hot module replacement.

Would you considering switching to another style loader that does support HMR? And maybe including PostCSS?

I'm willing to do the work and create a PR if you agree. Bear in mind I'm pretty new to webpack, but I have time to hit my head on the wall until it works.

[empz]

I've managed to add HMR for the styles by simply changing the loader for .css as following and also removing the extractCSS object from the plugins array.

{
    test: /\.css/,
    loaders: ['style-loader', 'css-loader']
}

Even though that embeds the whole site.css in a <style> tag instead of outputting it to an external file, I'm pretty sure it's possible to have it served as a external resource while allowing HMR because I've played with some react/webpack starter kits that does exactly that.

I still need to add PostCSS with CSS Modules yet.

[SteveSandersonMS]

I'm pretty sure it's possible to have it served as a external resource while allowing HMR

Last time I checked, it explicitly wasn't possible with extract-text-plugin. Of course, style-loader is not a viable solution for production builds, and it's not desirable to have totally different ways of loading CSS in dev versus prod.

Would you considering switching to another style loader that does support HMR?

Sure, definitely open to that. If there's an alternative that's mainstream, production-ready, and doesn't increase the concept count (so ideally not involving a new concept like PostCSS if possible), then that would be a great improvement.

[empz]

I tried a little bit today but no luck.

These 2 kits have external .css with HMR: https://github.com/barbar/vortigern https://github.com/davezuko/react-redux-starter-kit

To me is more important to have HMR for styles in development, even though they are embedded in a <style> tag differing from the production build.

If I ever make it work I'll post a new comment here.

[empz]

@SteveSandersonMS Well, the following loader generates an external css (although in the form of a blob) and also supports HMR.

      {
        test: /\.css$/,
        loaders: [
          'style?sourceMap',
          'css?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
        ]
      },

I also want to use CSS Modules which the modules parameter of the css-loader enables.

But I just can't make it work. Node.js is throwing an error when trying to import a .css file as a module. I tried all the different import and require syntax I've found.

[Node] ts-loader: Using typescript@1.8.10 and E:\Desktop\JavaScriptServices\templates\ReactReduxSpa\tsconfig.json
[Node] module.js:442
[Node]     throw err;
[Node]     ^
[Node]
[Node] Error: Cannot find module './../../../../node_modules/css-loader/lib/css-base.js'
[Node]     at Function.Module._resolveFilename (module.js:440:15)
[Node]     at Function.Module._load (module.js:388:25)
[Node]     at Module.require (module.js:468:17)
[Node]     at require (internal/module.js:20:19)
[Node]     at Object.<anonymous> (<anonymous>:2080:19)
[Node]     at __webpack_require__ (<anonymous>:20:30)
[Node]     at Object.<anonymous> (<anonymous>:2059:29)
[Node]     at __webpack_require__ (<anonymous>:20:30)
[Node]     at Object.<anonymous> (<anonymous>:2036:16)
[Node]     at __webpack_require__ (<anonymous>:20:30)
fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[0]
      An unhandled exception has occurred while executing the request
System.Net.Http.HttpRequestException: An error occurred while sending the request. ---> System.Net.Http.WinHttpException: The connection with the server was terminated abnormally

And a huge inner stack trace below.

Seems to be some kind of path issue on the server. The weird thing is that the import is in a component that's not being loaded in the / route but it breaks the whole site anyway. My understanding of the server-side rendering process is close to null so I wouldn't even know where to look.

If I disable server-side rendering (by removing the asp-prerender tags from the Home view) it works as expected.

[empz]

@SteveSandersonMS

The homepage of the React/Redux template says:

Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt CSS and React components will be injected directly into your running application, preserving its live state.

Of course, style-loader is not a viable solution for production builds, and it's not desirable to have totally different ways of loading CSS in dev versus prod.

Then you should change the homepage to clarify that only .js files are hot reloaded.

[SteveSandersonMS]

Great point. Updated the templates to avoid making the false claim. Thanks!

[antmdvs]

@emzero I'm getting the same error trying to use CSS Modules, so I've disabled SSR for now. Please let me know if you find a solution.