Comment utiliser Sass dans React

Sass (syntactically awesome style sheets) est une extension de CSS avec des fonctionnalités supplémentaires qui la rendent plus puissante. 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 mettant en place un projet React.js simple et en y intégrant Sass.

Comment utiliser Sass dans votre projet React.js

Comme d’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 paquets comme yarn ou npm.

Vous pouvez vérifier si npm ou yarn est installé sur votre machine locale en lançant npm –version ou yarn –version. Si vous ne voyez pas de numéro de version dans votre terminal, installez d’abord npm ou yarn.

Créer un projet React.js

Pour suivre ce guide, vous pouvez mettre en place une application React.js simple en utilisant create-react-app.

Tout d’abord, utilisez une ligne de commande pour naviguer jusqu’au dossier dans lequel vous souhaitez créer votre projet React. Exécutez ensuite npx create-react-app <appname&gt ;; ce processus peut prendre un certain temps. Une fois qu’il est terminé, entrez dans le répertoire de l’application en utilisant cd <appname&gt ;. Ajoutez le contenu suivant à votre App.js comme point de départ :

 import React from "react"; 
import "./App.css"; 
function App() { 
return ( 
 <div className="wrapper"> 
  <h1>Using Sass in React</h1> 
  <header className="wrapper__btns"> 
   <button>Blue Button</button> 
   <button>Red Button</button> 
   <button>Green Button</button> 
  </header> 
 </div> ); 
} 
export default App; 

Une fois que vous avez mis en place un projet React de base, il est temps d’intégrer Sass.

Installer Sass

Vous pouvez installer Sass via npm ou yarn. Installez-le via yarn en exécutant yarn add sass ou, si vous préférez npm, lancez npm install sass. Votre gestionnaire de paquets ajoutera la dernière version de Sass à la liste des dépendances dans la section package.json fichier.

Si vous rencontrez des problèmes, voici un guide complet sur l’exécution, la configuration et le dépannage des scripts npm.

Renommer les fichiers .css en .scss ou .sass

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

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

 import "./index.scss";
import "./App.scss"; 

À partir de maintenant, vous devez utiliser l’extension .scss pour tous les fichiers de style que vous créez.

Importation et utilisation de variables et de mixins

L’un des avantages les plus significatifs de Sass est qu’il vous aide à écrire des styles propres et réutilisables en utilisant des variables et des mixins. Bien que la façon dont vous pouvez faire la même chose dans React ne soit pas évidente, ce n’est pas si différent de l’utilisation de Sass dans des projets écrits avec du JavaScript et du HTML.

Tout d’abord, créez un nouveau Styles dans votre dossier src . Dans le dossier Styles, créez deux fichiers : _variables.scss et _mixins.scss. Ajoutez les règles suivantes à _variables.scss :

 $background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px; 

Et ajoutez les règles suivantes à _mixins.scss :

 @mixin vertical-list {
    display: flex;
    align-items: center;
    flex-direction: column;
} 

Puis importez les variables et les mixins dans App.scss comme suit :

 @import "./Styles/variables";
@import "./Styles/mixins"; 

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

 @import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
  background-color: $background-color;
  color: $text-color;
  padding: $block-padding;

  &__btns {
    @include vertical-list;
    button {
      width: $btn-width;
      height: $btn-height;
    }
   }
} 

Voilà comment utiliser les variables et les mixins dans React. En plus des mixins et des variables, vous pouvez également utiliser toutes les autres fonctionnalités géniales de Sass, comme les fonctions. Il n’y a aucune limitation tant que vous configurez scss dans votre projet React.

Utiliser Sass dans React.js

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 paquetage sass via npm ou yarn, en mettant à jour vos fichiers CSS en .scss ou .sass, puis en mettant à jour vos importations pour utiliser la nouvelle extension de fichier. Après cela, vous pouvez commencer à écrire du SCSS dans React.