目前 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在服务器端和客户端都有效吗?
最佳答案
您可以使用webpack/extract-text-webpack-plugin
。这将创建一个独立的可重新分发的样式表,您可以从文档中引用。
关于reactjs - React 服务器端渲染 CSS 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34615898/