Tutoriel Webpack 5 – Comment configurer du CSS

14 février, 2022
DéveloppementJavascriptTutoriels

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

npm install --save-dev css-loader style-loader

Et deuxièmement, vous pouvez utiliser les deux chargeurs pour tous les fichiers CSS dans votre configuration Webpack :

webpack.config.js 
...

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

Ensuite, dans un nouveau fichier src/style.css, ajoutez-y quelques CSS 

src/style.css 
h1 {
  color: red;
}

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

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

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

CSS en production (facultatif)

Pour la production, vous aurez besoin d’une configuration différente lors de l’utilisation de CSS afin vos feuilles de styles dans des fichiers séparés.

Tout d’abord, installez le plugin MiniCssExtractPlugin pour Webpack dans vos dépendances de développement :

npm install --save-dev mini-css-extract-plugin

Ensuite, utilisez-le dans la configuration de production de votre Webpack au lieu du chargeur de style et en plus comme un plugin :

webpack.config.js 
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.(css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    ...
  ],
  ...
};

C’est tout. Une fois que vous aurez construit votre projet avec Webpack, vous verrez les fichiers de style apparaître dans votre dossier dist/.

Voir la suite : Comment configurer SASS

Ressources

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

Code final

Tutoriel Webpack 5

Twitter Youtube
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.