You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There's no way built into webpack core to reload external stylesheets automatically with HMR. There is a work around however, involving the automatic insertion and removal of link tags within a `hotEmitter.on("webpackHotUpdate"...` function. Many people have looked for a solution for this, but the only answer is located in an issue thread near the very bottom: webpack-contrib/extract-text-webpack-plugin#30
It would be much more efficient and helpful for developers to see the solution directly on the docs page until a workaround is implemented into Webpack core.
Copy file name to clipboardExpand all lines: content/guides/hot-module-replacement.md
+25Lines changed: 25 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -9,6 +9,7 @@ contributors:
9
9
- joshsantos
10
10
- drpicox
11
11
- skipjack
12
+
- christopher4lis
12
13
related:
13
14
- title: Concepts - Hot Module Replacement
14
15
url: /concepts/hot-module-replacement
@@ -150,6 +151,30 @@ body {
150
151
151
152
Change the style on `body` to `background: red;` and you should immediately see the page's background color change without a full refresh.
152
153
154
+
## HMR with External Stylesheets
155
+
156
+
HMR does not work right out of the box when using in tandem with the extract-text-webpack-plugin. As a result, a bit of extra code has to be added to your entry point to get things working:
This code will add stylesheet links to your file automatically and remove old ones after 2 seconds have passed, updating your file without a full page refresh.
0 commit comments