页面加载前的Webpack SCSS“闪烁”
Posted
技术标签:
【中文标题】页面加载前的Webpack SCSS“闪烁”【英文标题】：Webpack SCSS "Flicker" before pageload 【发布时间】：2015-04-18 15:10:06 【问题描述】：我正在开发一个同构的 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 来构建我的样式表，但我最终会拥有很多样式表，并且不希望它们都卡在一个文件中。
【问题讨论】：
【参考方案1】：初始 flash 出现是因为“style-loader”尚未下载您的 CSS 样式。
要解决此问题，需要同构（通用）渲染（在服务器上生成标记，而不仅仅是在生产模式下 - 也在开发模式下）。
您可以通过遵循“react-starter”项目路径（在上面的评论中提到）或使用webpack-isomorphic-tools来实现同构渲染
https://github.com/halt-hammerzeit/webpack-isomorphic-tools
【讨论】：
【参考方案2】：您将需要 2 个 webpack 构建：1 个用于 web，1 个用于节点。
如果您删除样式，您将能够在服务器和客户端上加载您的样式表。
var css = require("!css!sass!../../../styles/main.scss");
由于您不再使用样式加载器，因此您需要手动将生成的 css 注入到您的视图中。
在您看来，您需要包含此内容
<style>css.toString()</style>
这应该适用于服务器和客户端。当您执行 React.renderToString() 时，css 将按照它在您的 html 中的任何顺序进行解析。如果它在顶部/<head> 中，应该没有闪烁。
【讨论】：
...这种方法肯定不会有任何风格的热重载【参考方案3】：所以这里的想法是让 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>
在https://github.com/webpack/react-starter/blob/master/make-webpack-config.js 处查看 webpack 的配置。传递到此处的选项取决于您是在进行产品构建还是开发构建。由于我们要构建客户端包和预渲染服务器包，让我们看一下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 相同（否则您可以使用 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 更容易，那就去吧。但是玩弄这个。如果您需要更多说明和帮助，您可以发表评论，我会尽快处理，或者您可以在此处使用 webpack 聊天室 (https://gitter.im/webpack/webpack)，我相信其中一位开发人员可能可以给你一个比我更好的解释。
希望这有点（？）有帮助！
【讨论】：
感谢您提供详细而翔实的答案。很抱歉我花了这么长时间才写评论。我最终选择了 node-sass 中间件，因为它更容易启动和运行。 Node-sass-middleware 是我能找到的最接近的东西，我可以在其中模仿 Rails 清单文件（帮助一组开发人员从 Rails 过渡到节点生态系统。我确实逐步完成了它并且它起作用了，我很可能会回到这种方法，但这不是我现在需要的。再次感谢！ 天啊，这么复杂……但没有更简单的解决方案。 另见更简单的用法示例github.com/halt-hammerzeit/…以上是关于页面加载前的Webpack SCSS“闪烁”的主要内容，如果未能解决你的问题，请参考以下文章