CSS Academy · Lektion

PostCSS in Vite und Webpack

Integrieren Sie PostCSS mithilfe der Vite-Konfiguration und webpack-Loader in moderne Build-Pipelines.

PostCSS in Vite und Webpack ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

PostCSS in Vite

Vite bietet integrierte Unterstützung für PostCSS. Erstellen Sie im Projektstamm eine Datei postcss.config.js; Vite wendet sie während der Entwicklung und des Builds automatisch auf alle CSS-Dateien an.

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

Vite-CSS-Optionen

Alternativ können Sie PostCSS direkt in vite.config.js konfigurieren:

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

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

PostCSS in webpack

webpack verwendet postcss-loader in der Kette der Modulregeln. Platzieren Sie ihn immer nach css-loader und vor allen anderen CSS-Transformationen:

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

postcss-loader mit Konfigurationsdatei

Verweisen Sie in postcss-loader auf eine externe Konfigurationsdatei:

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

PostCSS mit Sass in Vite

Vite verarbeitet Sass zuerst und anschließend PostCSS. Installieren Sie sass und die PostCSS-Plugins – Vite übernimmt die Pipeline automatisch:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env wandelt modernes CSS (Nesting, benutzerdefinierte Medienabfragen usw.) in browserkompatibles CSS um – ähnlich wie Babel für JavaScript. Konfigurieren Sie die Zielstufe:

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

CSS Modules mit PostCSS

CSS Modules (mit lokal begrenzten Klassennamen) lassen sich sowohl in Vite als auch in webpack in PostCSS integrieren. CSS wird durch PostCSS verarbeitet, bevor das Scoping der Module angewendet wird.

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

Überprüfen, ob PostCSS angewendet wird

Sehen Sie sich in den Vite-DevTools die transformierten CSS-Source-Maps an. Von autoprefixer hinzugefügte Präfixe sind in der kompilierten Ausgabe sichtbar. Führen Sie vite build aus und überprüfen Sie dist/assets/*.css, um die Minimierung durch cssnano zu bestätigen.

LightningCSS als Alternative

Vite unterstützt jetzt lightningcss als schnellere Alternative zu PostCSS. Es übernimmt Autoprefixing, Nesting und Minimierung in einem einzigen Rust-Durchlauf:

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

Optimierung des Produktions-Builds

Aktivieren Sie cssnano (oder die Minimierung durch lightningcss) immer nur für Produktions-Builds. Entwicklungs-Builds sollten gut lesbares CSS mit Source Maps ausgeben, um das Debugging zu erleichtern.

Kurzer Test

Wo findet die PostCSS-Verarbeitung in einer webpack-CSS-Loader-Kette statt?

Zusammenfassung

Vite bietet über postcss.config.js integrierte Unterstützung für PostCSS. webpack verwendet postcss-loader nach css-loader. Verwenden Sie postcss-preset-env für Polyfills für modernes CSS. Aktivieren Sie cssnano nur für Produktions-Builds. Ziehen Sie lightningcss für schnellere Vite-Builds in Betracht. Erzeugen Sie immer Source Maps, um transformiertes CSS zu debuggen.

Häufig gestellte Fragen

Ist die Lektion „PostCSS in Vite und Webpack“ kostenlos?

Ja — der vollständige Text von „PostCSS in Vite und Webpack“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „PostCSS in Vite und Webpack“?

Integrieren Sie PostCSS mithilfe der Vite-Konfiguration und webpack-Loader in moderne Build-Pipelines. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „PostCSS in Vite und Webpack“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Was PostCSS macht und wie es funktioniert
Autoprefixer und cssnano
Eigene PostCSS-Plugins
PostCSS in Vite und Webpack

← Zurück zu CSS Academy