I am going to import styles with CSS Module and make it work with server-side rendering. I tried the following methods but each one has its own caveat. What is the best possible way to require('.style.scss')
if any side effects?
Using the css-modules-require-hook:
Advantage: Easy to configure. You just need to call the hook at the beginning of server code. You don't need to modify components.
Caveat: It modifies the
require.extensions
global object, which is deprecated.Using the isomorphic-style-loader:
Advantage: No more hooks to
require.extensions
.Caveat: Wrapping components with HOCs that uses the React
Context
, which is an experimental API and likely to break in future releases of React.Using the webpack-isomorphic-tools:
Advantage: No dependency on
require.extensions
orContext
(AFAIK).Caveat: Wrapping server inside webpack-isomorphic-tools instance. And can we please get rid of webpack-assets.json?
Bundling server with Webpack:
Advantage: No more hooks or injections.
Caveat: In development, it is very cumbersome to bundle everything whenever the code changes and even makes it harder to debug in a large bundled
.js
file. Not sure - you may need to pass a bundled.js
to test runner.
Disclaimer:
- The advantages and caveats below are just my two cents, and actually I love all the libraries, plugins and approaches they took to solve the problem and really appreciate their efforts.
- I am not a native English speaker, please correct me if I misrepresent myself.
In the end, I decided to hook the require.extensions
in development. Probably it is not the best way, showing warning messages on console, like checksum mismatch, but in development mode, I can ignore it.
来源:https://stackoverflow.com/questions/42220913/server-side-rendering-of-css-modules