Renderización del lado del servidor de React de módulos CSS

La práctica actual para CSS con componentes de React parece estar usando el cargador de estilos de webpack para cargarlo en la página.

import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

Al hacer esto, el cargador de estilos inyectará un elemento <style> en el DOM. Sin embargo, el <style> no estará en el DOM virtual, por lo que si hace renderizado del lado del servidor, se omitirá el <style>. Esto hace que la página tenga FOUC .

¿Hay otros métodos para cargar módulos CSS que funcionen tanto en el lado del servidor como del cliente?

Author: willwill, 2016-01-05
Source

2 answers

Puede echar un vistazo a isomorphic-style-loader. El cargador fue creado específicamente para resolver este tipo de problemas.

Sin embargo, para usar esto debe usar un método _insertCss() proporcionado por el cargador. La documentación detalla cómo usarlo.

Espero que haya ayudado.

 6
Author: sandeep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-22 09:24:43

Puede utilizar webpack/extract-text-webpack-plugin. Esto creará una hoja de estilos redistribuible de forma independiente a la que podrá hacer referencia desde sus documentos.

 11
Author: Filip Dupanović,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-06 09:22:24