Comment utiliser Sass dans React

Sass est une version améliorée de CSS que vous pouvez utiliser dès maintenant dans vos projets React.

Sass (feuilles de style syntaxiquement impressionnantes) est une extension de CSS avec des fonctionnalités supplémentaires qui le rendent plus puissant. La meilleure chose à propos de Sass est sa compatibilité avec CSS, ce qui signifie que vous pouvez l'utiliser dans vos projets de développement Web avec des frameworks JavaScript comme React.

Cependant, contrairement au CSS vanille, vous avez besoin d'un peu de configuration pour utiliser Sass. Découvrez comment cela fonctionne en configurant un projet React.js simple et en y intégrant Sass.

Comme les autres processeurs CSS, Sass n'est pas supporté nativement par React. Pour utiliser Sass dans React, vous devez installer une dépendance tierce via un gestionnaire de packages comme yarn ou npm.

Vous pouvez vérifier si npm ou yarn est installé sur votre machine locale en exécutantnpm --versionoufil --version . Si vous ne voyez pas de numéro de version dans votre terminal, installez d'abord npm ou yarn.

Pour suivre ce guide, vous pouvez configurer une application React.js simple à l'aide de create-react-app.

Tout d'abord, utilisez une ligne de commande pour accéder au dossier dans lequel vous souhaitez créer votre projet React. Ensuite, exécuteznpx create-react-app . Une fois le processus terminé, entrez dans le répertoire de l'application en utilisantcd . Ajoutez le contenu suivant à votreApp.jsfichier en entrée :

Une fois que vous avez configuré un projet React de base, il est temps d'intégrer Sass.

Vous pouvez installer Sass via npm ou yarn. Installez-le via le fil en exécutantfil ajouter du culotou, si vous préférez npm, exécuteznpm installer sass . Votre gestionnaire de paquets ajoutera la dernière version de Sass à la liste des dépendances dans le dossier du projet.package.jsondéposer.

Dans le dossier du projet, renommez respectivement App.css et index.css en App.scss et index.scss.

Après avoir renommé ces fichiers, vous devez mettre à jour les importations dans vos fichiers App.js et index.js pour qu'elles correspondent aux nouvelles extensions de fichier comme suit :

À partir de maintenant, vous devez utiliser l'extension .scss pour tout fichier de style que vous créez.

L'un des avantages les plus importants de Sass est qu'il vous aide à écrire des styles propres et réutilisables à l'aide de variables et de mixins. Bien qu'il ne soit pas évident de savoir comment faire la même chose dans React, ce n'est pas si différent de l'utilisation de Sass dans des projets écrits avec du JavaScript et du HTML simples.

Tout d'abord, créez un nouveaumodesdossier dans votresrc dossier. Dans le dossier Styles, créez deux fichiers :_variables.scsset_mixins.scss . Ajoutez les règles suivantes à _variables.scss :

Et ajoutez ce qui suit à _mixins.scss :

Importez ensuite les variables et les mixins dans App.scss comme suit :

Utilisez vos variables et mixins dans le fichier App.scss :

C'est ainsi que vous utilisez les variables et les mixins dans React. Outre les mixins et les variables, vous pouvez également utiliser toutes les autres fonctionnalités impressionnantes de Sass, comme les fonctions. Il n'y a pas de limitation.

Sass fournit plus de fonctionnalités en plus de CSS, ce qui est exactement ce dont vous aurez besoin pour écrire du code CSS réutilisable.

Vous pouvez commencer à utiliser Sass dans React en installant le package sass via npm ou yarn, en mettant à jour vos fichiers CSS vers .scss ou .sass, puis en mettant à jour vos importations pour utiliser la nouvelle extension de fichier. Après cela, vous pouvez commencer à écrire SCSS dans React.

Alvin Wanjala est rédacteur principal pour Android chez MakeUseOf et développeur de logiciels. En tant qu'utilisateur passionné d'Android qui est tombé amoureux de l'écosystème après avoir obtenu son premier appareil en 2013, il s'attache à aider les utilisateurs à tirer le meilleur parti de leurs appareils. Mais étant un passionné de technologie qui utilise quotidiennement plusieurs plates-formes, il couvre également iOS, Mac, les médias sociaux et d'autres sujets dans le large spectre de la technologie grand public. Depuis lors, son travail a été présenté sur XDA Developers et plusieurs autres sites Web technologiques. En plus de l'écriture, il poursuit un deuxième diplôme en informatique, en se concentrant sur le développement de logiciels.