CSS 模块的服务器端渲染 [英] Server-side rendering of CSS modules

问题描述

我将使用 CSS 模块 导入样式并使其与服务器端渲染一起使用.我尝试了以下方法，但每个方法都有自己的警告.如果有任何副作用，require('.style.scss') 的最佳方法是什么?

1. 使用css-modules-require-hook:

   优势:易于配置.您只需要在服务器代码的开头调用钩子.您无需修改​​组件.

   警告:它修改了 require.extensions 全局对象，不推荐使用.

2. 使用 isomorphic-style-loader:

   优势:不再需要 require.extensions 的钩子.

   警告:使用使用 React Context 的 HOC 包装组件，这是一个实验性 API，可能会在 React 的未来版本中失效.

3. 使用 webpack-isomorphic-tools::>

   优势:不依赖于 require.extensions 或 Context (AFAIK).

   警告:将服务器包装在 webpack-isomorphic-tools 实例中.我们可以去掉 webpack-assets.json 吗?

4. 使用 Webpack 捆绑服务器:

   优势:不再需要挂钩或注入.

   警告:在开发过程中，在代码发生变化时捆绑所有内容非常麻烦，甚至更难在大捆绑的.js中进行调试 文件.不确定 - 您可能需要将捆绑的 .js 传递给测试运行程序.

免责声明:

• 下面的优点和注意事项只是我的两分钱，实际上我喜欢他们用来解决问题的所有库、插件和方法，并且非常感谢他们的努力.
• 我的母语不是英语，如果我陈述不实，请纠正我.

解决方案

最后，我决定在开发中钩住require.extensions.可能这不是最好的方法，在控制台上显示警告消息，例如校验和不匹配，但在开发模式下，我可以忽略它.

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

这篇关于CSS 模块的服务器端渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！