Feature Request: Webpack Hot Module Replacement to inject external css <link href=> instead of inline <style></style>

[IAMtheIAM]

• I'm submitting a ...
  [X ] feature request
• What is the current behavior?

Currently Webpack HMR appends inlined style tags to the head in the form of <style></style> tags. This makes it difficult to view which component each css class belongs to, because the CSS inspector pane normally says "buttons.scss" when using with sourcemaps.

Now it just says <style>...</style> in the right hand pane.

When dealing with many css classes, its very difficult to know which component to go into to begin styling without it telling me which component's class is active.

• What is the motivation / use case for changing the behavior?

Here is what most CSS developers are used to and expect:

It says frameworks-10c1164.css is the source of the class, therefore I know to go to that file/component to make changes.

It would be ideal if webpack HMR preserved this standard CSS workflow while still enabling HMR. A simple solution is to simply appent external styles to the head such as and then swap out that tag when HMR sends an update.

Is it feasible?

[IAMtheIAM]

I figured out how to do it. My post here explains it.

[ebeal]

Just to clarify this is not reloading the page at all right? (as hmr would imply) I've seen it where it replaces the css but still causes a refresh.
This would be great in the wiki, any chance you could add something for it?

[PatrickJS]

sorry this may sound super rule but I'm closing long standing issues and refactoring the codebase. If you run into this problem again feel free to open another issue