页面加载前的 Webpack SCSS "Flicker"

Question

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

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

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

Answer 1

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

这里有一个完整的示例，我将向您介绍其中的相关部分。 https://github.com/webpack/react-starter

app中的prerender.html是作者使用的服务器端模板。注意下面两行代码：

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

在此处查看 webpack 的配置 https://github.com/webpack/react-starter/blob/master/make-webpack-config.js. The options being passed into here depends on whether you're doing a prod build or a dev build. Since we want to build the client bundle and the prerendering server bundle, let's take a look at 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 并替换 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 更容易，那就去做吧。但是一定要玩这个。如果您需要更多说明和帮助，可以 post 发表评论，我会尽快处理，或者您可以在此处使用 webpack 聊天室 (https://gitter.im/webpack/webpack)，我确定那里的开发人员可能会给你比我更好的解释。

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

Answer 2

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

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

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

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

在您看来，您需要包含此内容

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

这应该适用于服务器和客户端。当你执行 React.renderToString() 时，css 将按照它在你的 html 中的任何顺序进行解析。如果是在top/in处<head>，应该不会出现闪烁。

Answer 3

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

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

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

来实现同构渲染

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

页面加载前的 Webpack SCSS "Flicker"

Webpack SCSS "Flicker" before pageload

javascript

css

express

reactjs

webpack