Comment ajouter des styles SCSS à un projet React ?
Le SCSS est une surcouche du langage CSS. Il intègre dans les feuilles de style CSS des notions propres aux langages de programmation. On peut intégrer des variables, des conditions ou encore des boucles. Cela permet d'automatiser la création de feuilles de styles pour faciliter le développement et réduire la taille des fichiers. Quand vous travaillez sur des projets avec la librairie React, vous pouvez utiliser l'écosystème de NodeJS et installer des paquets conçus pour intégrer dans n'importe quel projet la gestion du SCSS.
Si vous démarrez votre projet de zéro, la meilleure solution pour créer votre application React est le programme "Create React App". Il permet grâce à la ligne de créer un squelette d'application fonctionnant avec React. Cela donne une structure prête à l'emploi que vous pouvez ensuite personnaliser. Pour créer une application avec ce squelette, une ligne de commande suffit.
npx create-react-app mon-application
Une fois votre application créée, vous pouvez installer une librairie qui gère le SCSS dans votre projet. Ces librairies sont les mêmes qui gèrent le langage SASS, une autre surcouche du langage CSS plus ancienne. La librairie "sass" est la plus populaire et la plus récente actuellement. Pour l'installer, utilisez la commande "npm" comme pour n'importe quelle librairie NodeJS.
npm i sass --save-devs
N'installez pas la librairie "node-sass", une autre librairie populaire pour gérer les fichiers SASS et SCSS. Cette librairie n'est plus à jour, son développement a été abandonné.