Tutoriel Webpack 5 – Comment configurer PostCSS

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

npm install --save-dev postcss-loader postcss-preset-env

Nous utiliserons le plugin PostCSS le plus couramment utilisé, appelé postcss-preset-env, qui permet de définir des valeurs par défaut raisonnables :

Il faudra ajouter le loader PostCSS pour tous les fichiers CSS (et SCSS, si vous avez aussi SASS) dans votre configuration Webpack :

webpack.config.js
...

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(scss|css)$/,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: "postcss-loader",
                options: {
                    postcssOptions: {
                        plugins: [
                            [
                                "postcss-preset-env",
                                {
                                    browsers: 'last 2 versions'
                                },
                            ],
                        ],
                    },
                },
            },
            'sass-loader'
        ],
    }
    ],
  },
  ...
};

Solution alternative est de créer un fichier postcss.config.js à la racine, le loader postcss chargera le fichier de configuration automatiquement.

postcss.config.js
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        browsers: 'last 2 versions'
      },
    ],
  ],
};

Si vous utilisez une feuille de style CSS comme celle-ci, elle sera automatiquement préfixée pour certains navigateurs :

Il ne s’agit là que d’une seule valeur par défaut fournie avec les presets PostCSS. Vous pouvez en découvrir d’autres sur leur site Web ou explorer d’autres plugins PostCSS.

// avant
.flex-col {
  display: flex;
  flex-direction: column;
}

// après
.flex-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

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.