Webpack SCSS在页面加载之前"闪烁"

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>

请参阅webpack的配置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(否则你可以用得到publicPath require("../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),我是确定那里的一位开发人员可能会给你一个比我更好的解释.

希望这有点(？)有用!