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-envNous 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 :
...
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.
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
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.