23
La pratica corrente per i CSS con Reagire componenti sembra essere utilizzando lo stile-loader di webpack per caricarlo nella pagina in.Reagire Server il rendering lato di moduli CSS
import React, { Component } from 'react';
import style from './style.css';
class MyComponent extends Component {
render(){
return (
<div className={style.demo}>Hello world!</div>
);
}
}
In questo modo lo stile-loader inietterà un elemento <style> nel DOM. Tuttavia, lo <style> non si troverà nel DOM virtuale e quindi se si esegue il rendering lato server, verrà omesso lo <style>. Ciò causa la pagina per avere FOUC.
Esistono altri metodi per caricare CSS modules che funzionano sia sul lato server che sul lato client?
Puoi provare questo plugin postcss: https://github.com/ctxhou/postcss-hash-classname. Ho trovato che il caricatore di stile limita solo il webpack, quindi con questo plugin puoi estrarre il nome della classe css come un file js object. Quindi puoi richiedere questo 'style.js' e utilizzare lo stesso codice. Poiché questo è un file '.js', ovviamente può supportare il rendering lato server. È possibile controllare il repository per saperne di più:) –
Il problema che sto cercando di risolvere è quello di fare in modo che il webpack inietti il CSS nel DOM virtuale in modo che il rendering lato server abbia anche il CSS imballato. Non penso che qualcuno abbia qualcosa legato a questo compito? – willwill
Vuoi dire che non vuoi creare un altro file css e vuoi solo che il webpack ti aiuti a iniettarlo? –