Skip to content

Commit 85fc019

Browse files
committed
Added documentation about HMR.
1 parent cf85651 commit 85fc019

File tree

1 file changed

+11
-0
lines changed

1 file changed

+11
-0
lines changed

README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is
2121
- [Options](#options)
2222
- [`allowMultiple`](#allowmultiple)
2323
- [`errorWhenNotFound`](#errorwhennotfound)
24+
[React Hot Module Replacement](#react-hot-module-replacement)
2425
- [Class Composition](#class-composition)
2526
- [What Problems does Class Composition Solve?](#what-problems-does-class-composition-solve)
2627
- [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.
366367
}
367368
```
368369

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+
369380
## Class Composition
370381

371382
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

Comments
 (0)