React Server端CSS模块渲染

Question

CSS与React组件的当前做法似乎是使用webpack的样式加载器将其加载到页面中。

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模块吗？

Answer 1

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

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

希望能有所帮助。