目前对带有 React 组件的 CSS 的做法似乎是使用 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>
);
}
}
通过这样做，样式加载器将一个<style>元素注入到 DOM 中。但是，<style>不会在虚拟 DOM 中，因此如果进行服务器端渲染，<style>将被省略。这会导致页面具有FOUC。
有没有其他方法可以加载在服务器端和客户端都工作的CSS module？
您可以使用webpack/extract-text-webpack-plugin. 这将创建一个独立的可重新分发的样式表，您可以从文档中引用。
你可以看看isomorphic-style-loader。加载器是专门为解决此类问题而创建的。
但是，要使用它，您必须使用_insertCss()加载程序提供的方法。文档详细说明了如何使用它。
希望它有所帮助。
对我来说，我使用 Webpack loader css-loader在同构应用程序中实现 CSS module。
在服务器端，webpack 配置将是这样的：
module: {
rules: [
{
test: /\.(css)$/,
include: [
path.resolve(__dirname, '../src'),
],
use: [
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader/locals',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
},
],
},
]
}
在客户端，webpack 配置如下所示
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
},
当然，如果你使用的是 SASS，则需要使用sass-loader将 scss 编译为 css，并且postcss-loader可以帮助添加autoprefixer.