Création de styles reabox-toolbox dans un fichier css séparé

Question

React-toolbox construit ses styles à sa manière. Tous les styles ressemblent à ceci: [ link ]

Cette façon d'inclure apparemment n'est pas supportée par les appareils mobiles (ou au moins mon téléphone pour lequel je construis une application). Et quand je vérifie le projet sur l'appareil mobile, je reçois tout sans styles.

Sur le site officiel de la boîte à outils de réaction, ils incluent tous les styles sous la forme d'un fichier .css distinct et tout semble bon. Comment puis-je construire le projet de la même manière?

Mes chargeurs de webpack.config section css ressemble à ceci:

{ 
    test: /\.(scss|css)$/, 
    loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap' 
} 

Answer 1

Hmmmm ... cela peut ne pas la réponse attendue. Mais j'ai perdu beaucoup de temps avec le même problème. En fonction de la progression de votre processus de développement, vous êtes en mesure de vérifier une alternative: matériel-ui. Je préfère toujours l'interface matérielle à la boîte à outils de réaction.

Answer 2

Dans votre configuration, vous utilisez css-loader et style-loader pour que chaque fichier requis soit regroupé dans une étiquette style et injecté dans le document. Cela peut créer des problèmes FOUC au premier rendu, donc pour les applications de production, vous pouvez utiliser extract-text-webpack-plugin. Avec ce plugin, lorsque vous créez votre bundle au moment du déploiement, webpack extraira tous les styles qui devraient être marqués dans un fichier CSS séparé. De cette façon, vous pouvez inclure votre CSS comme d'habitude en évitant les problèmes FOUC et en permettant la mise en cache et autres goodies CSS.

React Toolbox utilise ce plugin dans les exemples, donc vérifiez la configuration du site spec et docs ou l'exemple devrait suffire à le faire fonctionner!