reactjs - React 服务器端渲染 CSS 模块

Question

目前 CSS 与 React 组件的做法似乎是使用 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>
        );
    }
}

通过这样做，样式加载器将注入(inject) <style>元素到 DOM 中。然而，<style>不会在虚拟 DOM 中，因此如果进行服务器端渲染，<style>将被省略。这导致页面有 FOUC .

还有其他方法加载CSS modules在服务器端和客户端都有效吗？

Answer 1

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