Question

我正在开发一个同构的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来构建我的样式表，但我最终会有很多样式表，并且不希望它们都被塞进一个文件中。

Answer 1

所以这里的想法是让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>

请在此处查看网络包的配置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));
});

假设您的捆绑包的输出路径与server.js相同（否则您可以使用require("../build/stats.json").publicPath获取publicPath并将其添加到上面的STYLE_URL和SCRIPT_URL。

然后在prerender.jsx：https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/config/prerender.jsx 抓取服务器端模板prerender.html并替换网址：

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），我相信其中一位开发者可能会给你一个比我更好的解释。

希望这有点（？）有用！

Answer 2

初始闪存出现是因为＆＃34; style-loader＆＃34;还没有下载你的CSS样式。

要解决此问题，需要同构（通用）渲染（在服务器上生成标记，而不仅仅是在生产模式下 - 在开发模式下）。

您可以通过遵循＆＃34; react-starter＆＃34;来实现同构渲染。项目路径（在上面的评论中提到），或使用webpack-isomorphic-tools

https://github.com/halt-hammerzeit/webpack-isomorphic-tools

Answer 3

您将需要2个webpack构建：1个用于Web，1个用于节点。

如果删除样式，则可以在服务器和客户端上加载样式表。

  var css = require("!css!sass!../../../styles/main.scss");

由于您不再使用样式加载器，因此需要手动将生成的css注入视图中。

在您看来，您需要包含此

<style>{css.toString()}</style>

这应该适用于服务器和客户端。当您执行React.renderToString（）时，将按照html中的顺序解析css。如果它位于<head>的顶部/，则应该没有闪烁。

Webpack SCSS＆＃34; Flicker＃34;在页面加载之前

3 个答案: