Styliser React avec Sass

C'est quoi Sass

Sass est un pré-processeur CSS.

Les fichiers Sass sont exécutés sur le serveur et envoient du CSS au navigateur.

Vous pouvez en savoir plus sur Sass dans notre didacticiel Sass .

Puis-je utiliser Sass ?

Si vous utilisez le create-react-appdans votre projet, vous pouvez facilement installer et utiliser Sass dans vos projets React.

Installez Sass en exécutant cette commande dans votre terminal :

>npm i sass

Vous êtes maintenant prêt à inclure des fichiers Sass dans votre projet !

Créer un fichier Sass

Créez un fichier Sass de la même manière que vous créez des fichiers CSS, mais les fichiers Sass ont l'extension de fichier.scss

Dans les fichiers Sass, vous pouvez utiliser des variables et d'autres fonctions Sass :

mon-sass.scss :

Créez une variable pour définir la couleur du texte :

$myColor: red;

h1 {
  color: $myColor;
}

Importez le fichier Sass de la même manière que vous avez importé un fichier CSS :

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));

❮ Précédent Suivant ❯

Réagir Tutoriel