Isomorphic Style Loader
The isomorphic style loader based on style-loader, work both with server side and browser side.
Install
npm install iso-morphic-style-loader --save-dev
Usage
In fact, there is nothing different with the style-loader, just use the same config as you like.
However, some more work if you want to add critical path CSS with isomorphic app:
/// Such as server.js, where you render your isomorphic app and will send it/// back to your user.datastyles = // iso-morphic-style-loader will offer you the way to access imported styles// via React's context.const context = // will be invoked when render in server side { styles }// Then we will pass this styles to your React Component.const html = ReactDOMresstatusroutestatus || 200res /////////// // Here is your App.js// Perfect, we can insert styles easily. { return styles } //////////// And here your component where really import styles // The decorator will invoke previous iterateCss method when the component get rendered@Component {}
Features
-
For server side, the lib will use React's context to offer you a way to access styles.
{styles}Nothing will happens if you ignore
iterateCss
, no errors in server side rendering, and works the same asstyle-loader
do.But if you want to optimize for critical path CSS rendering, please inject styles during server side rendering.
-
The browser side behaviour is exactly the same as
style-loader@0.18.2
. And you can enjoy all features supported bystyle-loader@0.18.2
. -
No FOUC, no duplicate!
- The script will try to remove the styles injected at server side to prevent duplicate.
- However it only remove after client side styles created, so no FOUC.
Demo
Left is with style-loader
and right is with iso-morphic-style-loader
.