Server-side rendering of CSS modules

Question

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?

1. Using the https://github.com/css-modules/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.

2. Using the https://github.com/kriasoft/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.

3. Using the webpack-isomorphic-tools:

   Advantage: No dependency on require.extensions или же Context (AFAIK).

   Caveat: Wrapping server inside webpack-isomorphic-tools instance. And can we please get rid of webpack-assets.json?

4. 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 файл. Not sure - you may need to pass a bundled .js to test runner.

Отказ от ответственности:

• 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.

Answer 1

В итоге я решил зацепить require.extensions в развитии. Возможно, это не самый лучший способ - показывать на консоли предупреждающие сообщения, например, несоответствие контрольной суммы, но в режиме разработки я могу это игнорировать.