现在,我正在加载我的main.scss文件在一个React组件,如下所示：
if (typeof window !== 'undefined') {
require("!style!css!sass!../../../styles/main.scss");
}
这对于在组件中加载单个样式表非常有用,但是在安装React部件之前有一个闪烁.我明白这是因为这是在客户端应用程序加载后注入样式表,因此样式表不能立即可用.
这导致了一个实际的问题：是否有一种方法可以将这个样式表注入到我的服务器端模板中,同时仍然使用webpack加载器,或者是否这样调用一个单独的gulpfile或express中间件？我以前使用gulpfile来构建我的样式表,但是最终会有很多样式表,并且不希望它们被卡在一个文件中.
解决方法
这里有一个完整的例子,我将引导您完成相关部分.
https://github.com/webpack/react-starter
应用程序中的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 build还是dev build.由于我们要构建客户端软件包和预渲染服务器软件包,我们来看看https://github.com/webpack/react-starter/blob/master/webpack-production.config.js.它创建了两个软件包,特别是第一个软件包,针对浏览器设置了单独的样式表,第二个配置是用于预渲染的.
对于第一个编译,它使用：
plugins.push(new ExtractTextPlugin("[name].css" + (options.longTermCaching ? "?[contenthash]" : "")));
在您的捆绑包旁边创建一个单独的css文件.在第二次编译期间(用于预渲染),它使用null加载器来加载样式(因为我们已经有了我们在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,并将其添加到上面的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),我确定其中一个开发人员可能会给你比我做的更好的解释
希望这有点(？)的帮助！