2015-09-24 24 views
5

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?

risposta

0

Credo che il problema sia che la configurazione corrente del Webpack utilizza i moduli CSS. I moduli CSS rinominano automaticamente le tue classi CSS per evitare collisioni di nomi di classi globali.

La correzione:

// remove 'modules' from the end of your css-loader argument 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") } 

// like so 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader") } 

Ora saranno conservati i nomi di classe. Anche se, non sono sicuro del motivo per cui vuoi farlo. Ti interessa condividere perché?

+0

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

Problemi correlati