Webpack和SASS问题（React应用程序）

Question

我有一个非常基本的Node.js + Express应用程序，使用React进行一些服务器和客户端渲染。当Express应用程序返回一个React呈现组件作为其响应的一部分时，它会返回给客户端，但未应用CSS。然后它快速闪烁到CSS呈现页面。我有点难以理解发生了什么，只是想要立即呈现CSS ...我有点新使用webpack &反应，所以任何帮助/解释将不胜感激。

index.jade

html 
head 
    title="Sample app" 
    meta(charset='utf-8') 
    meta(http-equiv='X-UA-Compatible', content='IE=edge') 
    meta(name='viewport', content='width=device-width, initial-scale=1') 
body 
    #app!= content 
    script(src='http://localhost:8080/public/index.js') 

App.js

if (process.env.BROWSER) require("../styles/App.scss"); 

import React from 'react'; 

export default class App extends React.Component { 
    render() { 
    return (
     <div> 
     <p>Hello, world!</p> 
     </div> 
    ) 
    } 
} 

server.js（片段）

... 
app.get('/*', function (req, res) { 
    let content = React.renderToString(<App />); 
    res.render('index', { content: content }); 
}); 
... 

Answer 1

使用Extract Text Plugin以避免无风格文本的闪烁。 Pete Hunt（React的创造者之一）ran into this same issue with Webpack。由此，sokra（Webpack开发者）创建了这个插件，将css提取到样式表中。

没有这个插件，浏览器顺序执行的东西：

• 显示HTML（通过服务器端渲染的反应）。
• 获取Webpack包。
• 执行在头部插入样式元素的Webpack包。

有了这个插件，浏览器在这个顺序执行的事情：在头

• 加载样式表。
• 显示html（由服务器端React呈现）。
• 获取Webpack包。
• 执行Webpack包。