CSS 模块的 React 服务器端渲染答案

【问题标题】：React Server side rendering of CSS modulesCSS 模块的 React 服务器端渲染
【发布时间】：2016-04-09 12:38:08
【问题描述】：

目前对带有 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 modules 在服务器端和客户端都可以使用？

【问题讨论】：

你可以试试这个 postcss 插件：github.com/ctxhou/postcss-hash-classname。我发现样式加载器仅限于 webpack，所以使用这个插件，您可以将 css 类名提取为 js 对象文件。然后你可以要求这个style.js 并使用相同的代码。因为这是.js文件，当然可以支持服务端渲染。您可以查看 repo 以了解更多信息：)
我要解决的问题是让 webpack 将 CSS 注入到虚拟 DOM 中，这样服务器端渲染也包含 CSS。我不认为有人与此任务相关？
你的意思是你不想再创建一个css文件，只想让webpack帮你注入？

标签： reactjs webpack webpack-style-loader

【解决方案1】：

对我来说，我正在使用 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。

【讨论】：

当提到 sass、sass-loader、autoprefixer 等时——我是否还需要设置 webpack 来为服务器端处理这些？
是的，您还需要为服务器端设置这些。
有没有办法只使用一组配置来做到这一点 - 例如，创建一个将用于 either 服务器端或客户端渲染的库？（构建时未知）

【解决方案2】：

您可以查看isomorphic-style-loader。加载程序是专门为解决此类问题而创建的。

但是，要使用它，您必须使用加载程序提供的_insertCss() 方法。文档详细说明了如何使用它。

希望对您有所帮助。

【讨论】：

【解决方案3】：

您可以使用webpack/extract-text-webpack-plugin。这将创建一个独立的可再分发样式表，然后您可以从您的文档中引用。

【讨论】：

这对css模块和服务器端渲染的组合没有帮助