reactjs - Webpack 和 SASS 问题(React 应用程序)

Question

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

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(由服务器端 React 渲染)。
• 获取 Webpack bundle 。
• 执行 Webpack 包，在 head 中插入样式元素。

使用此插件，浏览器按以下顺序执行操作:

• 在 head 中加载样式表。
• 显示 html(由服务器端 React 渲染)。
• 获取 Webpack bundle 。
• 执行 Webpack bundle 。