React服务器端渲染CSS模块化

Question

目前在React组件中使用CSS的惯例似乎是使用webpack的style-loader将其加载到页面中。

import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

这样做会使样式加载器将一个<style>元素注入到DOM中。然而，<style>不会在虚拟DOM中，因此如果进行服务器端渲染，<style>将被省略。这会导致页面出现FOUC。

是否有其他方法可以加载适用于服务器和客户端的CSS模块？

- willwill

---

你可以尝试使用这个PostCSS插件：https://github.com/ctxhou/postcss-hash-classname。我发现样式加载器只限于Webpack，因此使用此插件，您可以将CSS类名提取为JS对象文件。然后，您可以要求这个`style.js`并使用相同的代码。因为这是一个`.js`文件，所以它当然支持服务器端渲染。您可以查看存储库以了解更多信息:) - Chen-Tai

我要解决的问题是使webpack将CSS注入到虚拟DOM中，以便服务器端渲染也可以使用打包好的CSS。我不认为这个任务与此有任何关联？ - willwill

你的意思是你不想创建另一个CSS文件，只希望Webpack帮助你注入它？ - Chen-Tai

Answer 1

你可以使用webpack/extract-text-webpack-plugin。这将创建一个独立的可重新分发的样式表，你可以从你的文档中引用它。

- Filip Dupanović

---

这并不能帮助CSS模块和服务器端渲染的组合。 - Flion

Answer 2

你可以查看同构样式加载器。该加载器是专门为解决这种问题而创建的。

然而，要使用它，您必须使用加载器提供的_insertCss()方法。文档详细介绍了如何使用它。

希望这有所帮助。

- sandeep

Answer 3

对我而言，我使用Webpack加载器css-loader在同构应用程序中实现CSS模块。

在服务器端，Webpack配置如下：

  module: {
    rules: [
      {
        test: /\.(css)$/,
        include: [
          path.resolve(__dirname, '../src'),
        ],
        use: [
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader/locals',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },
        ],
      },
    ]
  }

客户端方面，webpack配置如下：

          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },

当然，如果你使用SASS，你需要使用sass-loader将scss编译成css，而postcss-loader可以帮助添加autoprefixer。

- Eric Tan

---

当提到Sass、Sass-loader、Autoprefixer等时，我是否还需要设置Webpack来处理服务器端的这些内容？ - user3125823

是的，你需要为服务器端设置它们。 - Eric Tan

有没有一种方法可以只使用一个配置集来完成这个任务 - 例如，创建一个库，将用于服务器端或客户端渲染（在构建时未知）？ - Tom Pietrosanti