使用React组件的CSS的当前实践似乎是使用webpack的样式加载器将其加载到页面中.
import React, { Component } from 'react';
import style from './style.css';
class MyComponent extends Component {
render(){
return (
Hello world!
);
}
}
通过这样做,style-loader将向DOM 注入一个元素.但是,
不会在虚拟DOM中,因此如果进行服务器端渲染,
将省略.这导致页面有FOUC.
是否还有其他方法可以加载在服务器端和客户端都可以使用的CSS模块?
你可以用webpack/extract-text-webpack-plugin
.这将创建一个可独立再发布的样式表,您可以从文档中引用它.
你可以看一下isomorphic-style-loader.装载程序专门用于解决此类问题.
但是,为了使用它,您必须使用_insertCss()
加载程序提供的方法.该文档详细说明了如何使用它.
希望它有所帮助.