Tutoriel Webpack 5 – Comment configurer SASS

Si vous avez une configuration personnalisée de Webpack, vous vous demandez peut-être comment configurer SASS avec Webpack. Ce court tutoriel vous guide à travers le processus. Tout d’abord, vous devez installer un chargeur SASS et un SASS dans vos dépendances de développement :

npm install --save-dev sass-loader node-sass

Ensuite, vous pouvez utiliser le chargeur SASS pour tous les fichiers CSS et SCSS dans votre configuration Webpack :

webpack.config.js
...

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  ...
};

Ensuite, dans un nouveau fichier src/style.scss, ajoutez quelques CSS avec des fonctionnalités spécifiques à SASS (par exemple, des sélecteurs imbriqués) :

src/style.scss
h1 {
  color: red;

  &:hover {
    color: blue;
  }
}

Et dans votre fichier src/index.js, ou tout autre fichier JS, importez ce nouveau fichier CSS :

src/index.js
import './style.scss';

C’est tout. À partir de là, vous pouvez utiliser SASS dans votre projet JavaScript qui est alimenté par Webpack.

Ressources

Pensez à installer les dépendances en saisissant la commande npm install à la racine du projet

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.