Webpack SCSS”;闪烁“;在页面加载之前

Webpack SCSS "Flicker" before pageload

本文关键字：加载 SCSS 闪烁 Webpack      更新时间：2024-01-11

我正在开发一个同构的React+Flux+express应用程序，并为我的sass（带有sass加载器）和jsx文件使用webpack加载器。我不知道如何将我的样式表注入到服务器端模板中。为了这个目的，我看了一下Extract Text插件，但我真的希望能够使用热模块替换。现在，我正在React组件中加载我的main.scss文件，如下所示：

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

这对于在组件中加载单个样式表非常有效，但在安装React部分之前会出现闪烁。我知道这是因为这是在我的客户端应用程序加载后注入样式表，所以样式表不能立即使用。这就引出了一个实际的问题：有没有一种方法可以在仍然使用webpackloader的情况下将这个样式表注入到我的服务器端模板中，或者这需要一个单独的gulpfile或express中间件？我以前使用gullfile来构建我的样式表，但我最终会有很多样式表，不希望它们都挤在一个文件中。

因此，这里的想法是让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.这里传递的选项取决于您是在进行prod构建还是在进行dev构建。既然我们想要构建客户端捆绑包和预提交服务器捆绑包，那么让我们来看看https://github.com/webpack/react-starter/blob/master/webpack-production.config.js.它创建了两个bundle，特别是第一个bundle具有针对浏览器的单独样式表，第二个配置用于预呈现。

对于第一次编译，它使用这个：

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)，我相信那里的一位开发人员可能会给你一个比我更好的解释。

希望这对你有所帮助！

出现初始flash是因为"样式加载器"尚未下载您的CSS样式。

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

您可以通过遵循"react starter"项目路径（在上面的注释中提到）或使用webpack-isomorphic-tools 来实现同构渲染

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

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

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

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

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

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

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

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

相关文章：