CSS 模块的 React 服务器端渲染 [英] React Server side rendering of CSS modules
问题描述
目前对于带有 React 组件的 CSS 的做法似乎是使用 webpack 的 style-loader 将其加载到页面中.
The current practice for CSS with React components seems to be using webpack's style-loader to load it into the page in.
import React, { Component } from 'react';
import style from './style.css';
class MyComponent extends Component {
render(){
return (
<div className={style.demo}>Hello world!</div>
);
}
}
通过这样做,样式加载器将一个 元素注入到 DOM 中.但是,
不会在虚拟 DOM 中,因此如果进行服务器端渲染,
将被省略.这会导致页面具有 FOUC.
By doing this the style-loader will inject a <style>
element into the DOM. However, the <style>
will not be in the virtual DOM and so if doing server side rendering, the <style>
will be omitted. This cause the page to have FOUC.
是否有任何其他方法可以加载在服务器和客户端都工作的 CSS 模块一边?
Is there any other methods to load CSS modules that work on both server and client side?
推荐答案
你可以看看 同构式加载器.加载程序是专门为解决此类问题而创建的.
You can have a look at the isomorphic-style-loader. The loader was specifically created to solve this kind of issues.
但是要使用它,您必须使用加载程序提供的 _insertCss()
方法.文档详细说明了如何使用它.
However for using this you have to use an _insertCss()
method provided by the loader. The documentation details how to use it.
希望对您有所帮助.
这篇关于CSS 模块的 React 服务器端渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!