Проблема с 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, чтобы избежать вспышки неровного текста. Пит Хант (один из создателей Реакта) ran into this same issue with Webpack. Из этого, sokra (разработчик Webpack) создал этот плагин, чтобы извлечь css в таблицу стилей.

Без этого плагина браузер выполняет вещи в таком порядке:

• Показать HTML (оказываемая на стороне сервера React).
• Получить пакет Webpack.
• Выполнение пакета Webpack, который вставляет элементы стиля в голову.

С помощью этого плагина, браузер выполняет вещи в таком порядке:

• Загрузка таблицы стилей в голове.
• Показать html (визуализируется на стороне сервера).
• Получить пакет Webpack.
• Выполнение пакета Webpack.