CSS Academy · Lezione

PostCSS in Vite e Webpack

Integri PostCSS nelle moderne pipeline di build utilizzando la configurazione di Vite e i loader di webpack.

PostCSS in Vite e Webpack è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

PostCSS in Vite

Vite offre il supporto integrato per PostCSS. Crei un file postcss.config.js nella radice del progetto: Vite lo applicherà automaticamente a tutti i file CSS durante lo sviluppo e la build.

// 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)
};

Opzioni CSS di Vite

In alternativa, configuri PostCSS direttamente in vite.config.js:

// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
});

PostCSS in webpack

webpack usa postcss-loader nella catena delle regole dei moduli. Lo collochi sempre dopo css-loader e prima di qualsiasi altra trasformazione CSS:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              }
            }
          }
        ]
      }
    ]
  }
};

postcss-loader con file di configurazione

Indichi a postcss-loader un file di configurazione esterno:

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      config: './postcss.config.js'
    }
  }
}

PostCSS con Sass in Vite

Vite elabora prima Sass e poi PostCSS. Installi sass e i plugin PostCSS: Vite gestisce automaticamente la pipeline:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env converte il CSS moderno (nesting, custom media ecc.) in CSS compatibile con i browser, in modo simile a Babel per JavaScript. Configuri lo stage di destinazione:

plugins: [
  require('postcss-preset-env')({
    stage: 3, // use stage 3+ features
    features: { 'nesting-rules': true }
  })
]

CSS Modules con PostCSS

CSS Modules (nomi di classe con scope) si integrano con PostCSS sia in Vite sia in webpack. Elaborano il CSS tramite PostCSS prima di applicare lo scope dei moduli.

// vite.config.js
export default {
  css: {
    modules: { localsConvention: 'camelCase' },
    postcss: { plugins: [autoprefixer()] }
  }
}

Verificare che PostCSS sia applicato

Nei DevTools di Vite, visualizzi le source map del CSS trasformato. Le proprietà con prefisso aggiunte da autoprefixer saranno visibili nell'output compilato. Esegua vite build ed esamini dist/assets/*.css per verificare la minificazione di cssnano.

LightningCSS come alternativa

Vite ora supporta lightningcss come alternativa più veloce a PostCSS. Gestisce l'aggiunta dei prefissi, il nesting e la minificazione in un'unica passata Rust:

export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  }
}

Ottimizzazione della build di produzione

Abiliti sempre cssnano (o la minificazione di lightningcss) solo nelle build di produzione. Le build di sviluppo dovrebbero produrre CSS leggibile e dotato di source map, per semplificare il debug.

Verifica rapida

In quale posizione della catena dei loader CSS di webpack avviene l'elaborazione di PostCSS?

Riepilogo

Vite offre il supporto integrato per PostCSS tramite postcss.config.js. webpack usa postcss-loader dopo css-loader. Usi postcss-preset-env per i polyfill del CSS moderno. Abiliti cssnano solo nelle build di produzione. Valuti lightningcss per build Vite più veloci. Generi sempre le source map per il debug del CSS trasformato.

Domande Frequenti

La lezione «PostCSS in Vite e Webpack» è gratuita?

Sì — il testo completo di «PostCSS in Vite e Webpack» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «PostCSS in Vite e Webpack»?

Integri PostCSS nelle moderne pipeline di build utilizzando la configurazione di Vite e i loader di webpack. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «PostCSS in Vite e Webpack»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy