Sto costruendo la mia app React con Webpack e css-loader con i moduli. Lo adoro. La maggior parte dei miei fogli di stile sono tuttavia molto piccoli e mi piacerebbe inserirli nello stesso file JSX del mio markup e JavaScript.Utilizzo di css-loader in linea con Webpack + React
Il caricatore CSS che sto utilizzando in questo momento si presenta così:
{ test: /\.(css)$/i,
loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") }
Nel mio JSX, ho import
miei file CSS separati in questo modo:
import classNames from 'dashboard.css';
...
<div className={classNames.foo}></div>;
Questo viene poi compilato e tradotto in qualcosa tipo:
<div class="xs323dsw4sdsw_"></div>
Ma quello che mi piacerebbe fare è qualcosa di più come sotto, pur conservando i moduli localizzati che css-loader
mi dà:
var classNames = cssLoader`
.foo { color: blue; }
.bar { color: red; }
`;
...
<div className={classNames.foo}></div>;
è possibile? Come posso fare questo senza dover effettivamente require
/import
un file separato?
No, questo non è quello che voglio fare. Sto cercando di rimuovere il requisito di file CSS separati per piccoli componenti. Sto già usando i moduli Extract + e sono felice con loro. Voglio semplicemente attivare la funzionalità css-loader da file JavaScript, invece di esternalizzare il contenuto. – Stewart