12

我正在开发一个同构的 React+Flux+express 应用程序，并为我的 sass（使用 sass-loader）和 jsx 文件使用 webpack 加载器。我不确定如何将样式表注入服务器端模板。为此，我查看了提取文本插件，但我真的希望能够使用热模块替换。现在，我正在将我的main.scss文件加载到这样的 React 组件中：

if (typeof window !== 'undefined') {
  require("!style!css!sass!../../../styles/main.scss");
}

这适用于在组件中加载单个样式表，但在安装 React 部分之前会出现闪烁。我知道这是因为这是在我的客户端应用程序加载后注入样式表，因此样式表不会立即可用。这导致了一个实际的问题：有没有办法在仍然使用 webpack 加载器的同时将此样式表注入到我的服务器端模板中，或者这是否需要单独的 gulpfile 或 express 中间件？我以前使用 gulpfile 来构建我的样式表，但我最终会拥有很多样式表，并且不希望它们都卡在一个文件中。

4

3 回答 3

13

所以这里的想法是让 webpack 使用两个单独的配置进行编译，一个针对web（浏览器），另一个针对node（服务器端）。在其他 node/express 代码中可能需要服务器端包来使用 css 构建预渲染的 HTML。

这里有一个完整的例子，我会带你了解它的相关部分。 https://github.com/webpack/react-starter

prerender.htmlinapp是作者使用的服务器端模板。请注意以下两行代码：

<link rel="stylesheet" href="STYLE_URL">
<script src="SCRIPT_URL"></script>

在此处查看 webpack 的配置https://github.com/webpack/react-starter/blob/master/make-webpack-config.js。传递到此处的选项取决于您是在进行产品构建还是开发构建。由于我们要构建客户端包和预渲染服务器包，让我们看一下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 相同（否则您可以使用 publicPathrequire("../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 )，我是确定那里的一位开发人员可能会给您比我更好的解释。

希望这有点（？）有帮助！

于 2015-02-17T20:43:18.017 回答
1

初始 flash 出现是因为“style-loader”尚未下载您的 CSS 样式。

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

您可以通过遵循“react-starter”项目路径（在上面的评论中提到）或使用webpack-isomorphic-tools

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

于 2015-10-30T20:08:38.323 回答
-1

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

如果您删除样式，您将能够在服务器和客户端上加载您的样式表。

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

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

在你看来，你需要包括这个

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

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

于 2015-05-20T00:24:34.383 回答