Tutoriel Webpack 5 – Comment configurer SASS

14 février, 2022

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

Tutoriel Webpack 5

Nouveau Tutoriel

Installation de Laravel sur un serveur Debian

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.

Tutoriel Webpack 5 – Comment configurer SASS

Newsletter