PostCSS dans Vite et Webpack
Intégrez PostCSS aux chaînes de compilation modernes à l’aide de la configuration de Vite et des chargeurs webpack.
PostCSS dans Vite et Webpack est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
PostCSS dans Vite
Vite intègre la prise en charge de PostCSS. Créez un fichier postcss.config.js à la racine du projet et Vite l’appliquera automatiquement à tous les fichiers CSS pendant le développement et la compilation.
// postcss.config.js
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
export default {
plugins: [
autoprefixer,
process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : false
].filter(Boolean)
};Options CSS de Vite
Vous pouvez également configurer PostCSS directement dans vite.config.js :
// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
export default defineConfig({
css: {
postcss: {
plugins: [autoprefixer()]
}
}
});PostCSS dans webpack
webpack utilise postcss-loader dans la chaîne des règles de module. Placez-le toujours après css-loader et avant toute autre transformation CSS :
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}
]
}
]
}
};postcss-loader avec un fichier de configuration
Indiquez à postcss-loader un fichier de configuration externe :
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: './postcss.config.js'
}
}
}PostCSS et Sass dans Vite
Vite traite d’abord Sass, puis PostCSS. Installez sass et les modules d’extension PostCSS : Vite gère automatiquement la chaîne de traitement :
npm install --save-dev sass autoprefixer cssnanopostcss-preset-env
postcss-preset-env convertit le CSS moderne (imbrication, médias personnalisés, etc.) en CSS compatible avec les navigateurs, de façon comparable à Babel pour JavaScript. Configurez l’étape cible :
plugins: [
require('postcss-preset-env')({
stage: 3, // use stage 3+ features
features: { 'nesting-rules': true }
})
]Modules CSS avec PostCSS
Les CSS Modules (noms de classes limités à une portée) s’intègrent à PostCSS dans Vite comme dans webpack. Ils traitent le CSS avec PostCSS avant d’appliquer la limitation de portée des modules.
// vite.config.js
export default {
css: {
modules: { localsConvention: 'camelCase' },
postcss: { plugins: [autoprefixer()] }
}
}Vérifier que PostCSS est appliqué
Dans les DevTools de Vite, consultez les cartes source du CSS transformé. Les propriétés préfixées par autoprefixer seront visibles dans la sortie compilée. Exécutez vite build et examinez dist/assets/*.css pour vérifier la réduction effectuée par cssnano.
LightningCSS comme alternative
Vite prend désormais en charge lightningcss comme alternative plus rapide à PostCSS. Il gère l’ajout de préfixes, l’imbrication et la réduction de taille en une seule passe Rust :
export default {
css: {
transformer: 'lightningcss',
lightningcss: {
targets: browserslistToTargets(browserslist('>= 0.25%'))
}
}
}Optimiser la compilation de production
Activez toujours cssnano (ou la réduction de taille de lightningcss) uniquement pour les compilations de production. Les compilations de développement doivent produire un CSS lisible accompagné de cartes source, afin de faciliter le débogage.
Vérification rapide
À quel endroit le traitement PostCSS intervient-il dans la chaîne des chargeurs CSS de webpack ?
Récapitulatif
Vite intègre la prise en charge de PostCSS via postcss.config.js. webpack utilise postcss-loader après css-loader. Utilisez postcss-preset-env pour les polyfills du CSS moderne. Activez cssnano uniquement pour les compilations de production. Envisagez lightningcss pour accélérer les compilations Vite. Générez toujours des cartes source pour déboguer le CSS transformé.
Questions Fréquemment Posées
La leçon « PostCSS dans Vite et Webpack » est-elle gratuite ?
Oui — le texte complet de « PostCSS dans Vite et Webpack » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « PostCSS dans Vite et Webpack » ?
Intégrez PostCSS aux chaînes de compilation modernes à l’aide de la configuration de Vite et des chargeurs webpack. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « PostCSS dans Vite et Webpack » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Rôle et fonctionnement de PostCSS
- Autoprefixer et cssnano
- Modules d’extension PostCSS personnalisés
- PostCSS dans Vite et Webpack