Utilisation de fichiers CSS globaux avec des modules CSS

Question

J'utilise https://github.com/mxstbr/react-boilerplate pour un projet qui utilise les modules CSS et postCSS pour les styles, ce qui est génial. Cependant, j'ai également besoin de quelques fichiers CSS globaux pour la typographie, les composants de base, etc. Quelle est la meilleure pratique pour la manière de les ajouter? J'ai regardé en utilisant preCSS mais je ne sais pas exactement comment le configurer dans webpack, de sorte qu'il puisse importer ces fichiers globaux dans la feuille de style principale. Je suis nouveau sur webpack (je viens d'un arrière-plan Gulp/Grunt, en utilisant Sass) donc toute aide ici serait très appréciée.

Ce serait aussi génial si je pouvais utiliser les variables et les mixins définis dans ces fichiers dans les fichiers du module CSS, mais je ne sais pas si cela est possible ou conseillé. J'ai installé react-css-modules afin que je puisse utiliser styleName pour faire référence au fichier de module CSS et className pour faire référence aux classes CSS globales.

Je sais qu'il est l'attribut composes: class from '/path/to/file.css'; mais je préférerais avoir des fichiers globaux où différentes classes de services publics sont définis, tels que clearfix et classes d'erreur, etc. Donc, en utilisant react-css-modules, il ressemblerait à quelque chose comme ceci: <div className="clearfix" styleName="app-header">{...}</div>

Encore une fois, je ne sais pas si c'est correct.

Je veux rester fidèle aux meilleures pratiques car je travaille sur un projet open-source et je veux que ce soit fait de la meilleure façon possible. Merci pour tout conseil!

Answer 1

css-modules fournit :global qui peut être utilisé pour inclure localement dans vos fichiers css de code qui inclus à l'échelle mondiale dans l'application