我正在研究一个同构的React + Flux + express应用程序，并使用webpack加载器为我的sass（使用sass-loader）和jsx文件。我不知道如何将我的样式表注入服务器端模板。我为此目的看了一下Extract Text Plugin，但我真的希望能够使用热模块替换。
现在，我正在加载我的 main.scss 在这样的React组件中的文件：
if (typeof window !== 'undefined') {
require("!style!css!sass!../../../styles/main.scss");
}
这适用于在组件中加载单个样式表，但在安装React部件之前有一个闪烁。我知道这是因为这是注入样式表 后 我的客户端应用程序已加载，因此样式表不会立即可用。 这导致了一个实际的问题：有没有办法将这个样式表注入我的服务器端模板，同时仍然使用webpack加载器，或者这需要一个单独的gulpfile或表达中间件？我以前使用gulpfile来构建我的样式表，但我最终会有很多样式表，并且不希望它们都被卡在一个文件中。
所以这里的想法是让webpack编译有两个独立的配置，一个针对 web （浏览器），另一个目标 node （服务器端）。可以在其他节点/快速代码中使用服务器端捆绑包来使用css构建预呈现的HTML。
这里有一个完整的例子，我将引导您完成相关部分。 https://github.com/webpack/react-starter
该 prerender.html 在 app 是作者正在使用的服务器端模板。请注意以下两行代码：
<link rel="stylesheet" href="STYLE_URL">
<script src="SCRIPT_URL"></script>
请在此处查看webpack的配置 https://github.com/webpack/react-starter/blob/master/make-webpack-config.js。传递到此处的选项取决于您是在进行prod构建还是开发构建。由于我们要构建客户端捆绑包和预渲染服务器捆绑包，让我们来看看 https://github.com/webpack/react-starter/blob/master/webpack-production.config.js。它创建了两个包，特别是第一个包含针对浏览器的单独样式表，第二个配置用于预呈现。
对于第一次编译，它使用：
plugins.push(new ExtractTextPlugin("[name].css" + (options.longTermCaching ? "?[contenthash]" : "")));
在捆绑包旁边创建一个单独的css文件。在第二次编译期间（用于预渲染），它使用 null-loader 加载样式（因为我们已经在css文件中有我们需要的样式，我们可以使用它）。
现在，我们将css的路径注入您的服务器模板。
看一看简化版 server.js： https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/lib/server.js
var STYLE_URL = "main.css?" + stats.hash;
var SCRIPT_URL = [].concat(stats.assetsByChunkName.main)[0];
app.get("/*", function(req, res) {
res.contentType = "text/html; charset=utf8";
res.end(prerenderApplication(SCRIPT_URL, STYLE_URL, COMMONS_URL));
});
假设您的bundle的输出路径与server.js相同（否则您可以使用publicPath） require("../build/stats.json").publicPath 并将其添加到您的 STYLE_URL 和 SCRIPT_URL 以上。
然后在你的 prerender.jsx： https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/config/prerender.jsx抓住服务器端模板 prerender.html 并替换URL：
var html = require("../app/prerender.html");
module.exports = function(scriptUrl, styleUrl, commonsUrl) {
var application = React.renderComponentToString(<Application />);
return html.replace("STYLE_URL", styleUrl).replace("SCRIPT_URL", scriptUrl).replace("COMMONS_URL", commonsUrl).replace("CONTENT", application);
};
我承认这可能是复杂和令人困惑的，如果使用单独的gulpfile更容易，那就去做吧。但是要玩弄这个。如果您需要更多的说明和帮助，您可以发表评论，我会尽快找到它，或者您可以在这里使用webpack聊天室（https://gitter.im/webpack/webpack），我相信其中一位开发人员可能会给你一个比我更好的解释。
希望这有点（？）有用！
所以这里的想法是让webpack编译有两个独立的配置，一个针对 web （浏览器），另一个目标 node （服务器端）。可以在其他节点/快速代码中使用服务器端捆绑包来使用css构建预呈现的HTML。
这里有一个完整的例子，我将引导您完成相关部分。 https://github.com/webpack/react-starter
该 prerender.html 在 app 是作者正在使用的服务器端模板。请注意以下两行代码：
<link rel="stylesheet" href="STYLE_URL">
<script src="SCRIPT_URL"></script>
请在此处查看webpack的配置 https://github.com/webpack/react-starter/blob/master/make-webpack-config.js。传递到此处的选项取决于您是在进行prod构建还是开发构建。由于我们要构建客户端捆绑包和预渲染服务器捆绑包，让我们来看看 https://github.com/webpack/react-starter/blob/master/webpack-production.config.js。它创建了两个包，特别是第一个包含针对浏览器的单独样式表，第二个配置用于预呈现。
对于第一次编译，它使用：
plugins.push(new ExtractTextPlugin("[name].css" + (options.longTermCaching ? "?[contenthash]" : "")));
在捆绑包旁边创建一个单独的css文件。在第二次编译期间（用于预渲染），它使用 null-loader 加载样式（因为我们已经在css文件中有我们需要的样式，我们可以使用它）。
现在，我们将css的路径注入您的服务器模板。
看一看简化版 server.js： https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/lib/server.js
var STYLE_URL = "main.css?" + stats.hash;
var SCRIPT_URL = [].concat(stats.assetsByChunkName.main)[0];
app.get("/*", function(req, res) {
res.contentType = "text/html; charset=utf8";
res.end(prerenderApplication(SCRIPT_URL, STYLE_URL, COMMONS_URL));
});
假设您的bundle的输出路径与server.js相同（否则您可以使用publicPath） require("../build/stats.json").publicPath 并将其添加到您的 STYLE_URL 和 SCRIPT_URL 以上。
然后在你的 prerender.jsx： https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/config/prerender.jsx抓住服务器端模板 prerender.html 并替换URL：
var html = require("../app/prerender.html");
module.exports = function(scriptUrl, styleUrl, commonsUrl) {
var application = React.renderComponentToString(<Application />);
return html.replace("STYLE_URL", styleUrl).replace("SCRIPT_URL", scriptUrl).replace("COMMONS_URL", commonsUrl).replace("CONTENT", application);
};
我承认这可能是复杂和令人困惑的，如果使用单独的gulpfile更容易，那就去做吧。但是要玩弄这个。如果您需要更多的说明和帮助，您可以发表评论，我会尽快找到它，或者您可以在这里使用webpack聊天室（https://gitter.im/webpack/webpack），我相信其中一位开发人员可能会给你一个比我更好的解释。
希望这有点（？）有用！
初始闪存出现是因为“style-loader”尚未下载您的CSS样式。
要解决此问题，需要同构（通用）渲染（在服务器上生成标记，而不仅仅是在生产模式下 - 在开发模式下）。
你可以通过遵循“react-starter”项目路径（在上面的评论中提到），或者通过使用来实现同构渲染 webpack-isomorphic-tools
您将需要2个webpack构建：1个用于Web，1个用于节点。
如果删除样式，则可以在服务器和客户端上加载样式表。
var css = require("!css!sass!../../../styles/main.scss");
由于您不再使用样式加载器，因此需要手动将生成的css注入视图中。
在您的视图中，您需要包含此内容
<style>{css.toString()}</style>
这应该适用于服务器和客户端。当您执行React.renderToString（）时，将以您在html中的任何顺序解析css。如果它在顶部/中 <head>，应该没有闪烁。