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
Copy file name to clipboardExpand all lines: README.md
+11Lines changed: 11 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -21,6 +21,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is
21
21
-[Options](#options)
22
22
-[`allowMultiple`](#allowmultiple)
23
23
-[`errorWhenNotFound`](#errorwhennotfound)
24
+
– [React Hot Module Replacement](#react-hot-module-replacement)
24
25
-[Class Composition](#class-composition)
25
26
-[What Problems does Class Composition Solve?](#what-problems-does-class-composition-solve)
26
27
-[Class Composition Using CSS Preprocessors](#class-composition-using-css-preprocessors)
@@ -366,6 +367,16 @@ Throws an error when `styleName` cannot be mapped to an existing CSS Module.
366
367
}
367
368
```
368
369
370
+
## React Hot Module Replacement
371
+
372
+
Hot module reloading does to reload the CSS (see https://github.com/gajus/react-css-modules/issues/51).
373
+
374
+
To enable CSS reloading, my advise is to wrap your webpack setup using [BrowserSync](https://www.browsersync.io/). BrowserSync enables CSS reloading when it detects a file change.
375
+
376
+
[React CSS Modules examples](https://github.com/gajus/react-css-modules-examples) repository includes a configuration example using [BrowserSync](https://github.com/gajus/react-css-modules-examples/blob/master/webpack.config.browsersync.js).
377
+
378
+
Note that `webpackk-dev-server` program [does not write bundle files to the disk](https://github.com/webpack/webpack-dev-server/issues/62). You need to use a [write-file-webpack-plugin](https://github.com/gajus/write-file-webpack-plugin) plugin to force writing to the disk to enable BrowserSync to detect changes.
379
+
369
380
## Class Composition
370
381
371
382
CSS Modules promote composition pattern, i.e. every CSS Module that is used in a component should define all properties required to describe an element, e.g.
0 commit comments