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

Question

我有一个非常基本的 Node.js + Express 应用程序，使用 React 进行一些服务器端和客户端渲染。当 Express 应用程序 returns 一个 React 渲染组件作为其响应的一部分时，它返回给客户端时 CSS 未应用。然后它快速闪烁到 CSS 呈现的页面。我对正在发生的事情有点困惑，只想立即呈现 CSS...我对使用 webpack 和 React 有点陌生，所以任何 help/explanation 都将不胜感激。

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 to avoid flash of unstyled text. Pete Hunt (one of the creators of React) ran into this same issue with Webpack。由此，sokra（Webpack 开发人员）创建了这个插件以将 css 提取到样式表中。

如果没有这个插件，浏览器会按以下顺序执行：

显示html（服务器端React渲染）。
获取 Webpack 包。
执行在头部插入样式元素的 Webpack 包。

有了这个插件，浏览器按以下顺序执行：

在头部加载样式表。
显示html（服务器端React渲染）。
获取 Webpack 包。
执行 Webpack 包。

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

Webpack and SASS issue (React app)

reactjs

webpack