CSS Academy · Lektion

PostCSS i Vite og Webpack

Integrér PostCSS i moderne build-pipelines med Vite-konfiguration og webpack-loadere.

Lektion 4 af 412 trin

PostCSS i Vite og Webpack er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

PostCSS i Vite

Vite har indbygget understøttelse af PostCSS. Opret en postcss.config.js-fil i projektets rod, så anvender Vite den automatisk på alle CSS-filer under udvikling og kompilering.

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

CSS-indstillinger i Vite

Alternativt kan du konfigurere PostCSS direkte i vite.config.js:

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

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

PostCSS i webpack

webpack bruger postcss-loader i kæden af modulregler. Placér det altid efter css-loader og før alle andre CSS-transformationer:

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

postcss-loader med konfigurationsfil

Henvis postcss-loader til en ekstern konfigurationsfil:

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

PostCSS med Sass i Vite

Vite behandler Sass først og derefter PostCSS. Installér sass og PostCSS-plugins – Vite håndterer automatisk byggeprocessen:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env konverterer moderne CSS (indlejring, brugerdefinerede medier osv.) til CSS, der er kompatibel med browsere – på samme måde som Babel gør det for JavaScript. Konfigurér målstadiet:

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

CSS Modules med PostCSS

CSS Modules (afgrænsede klassenavne) integreres med PostCSS i både Vite og webpack. De behandler CSS gennem PostCSS, før modulafgrænsningen anvendes.

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

Kontrol af, at PostCSS anvendes

Se de transformerede CSS-source maps i Vite DevTools. Præfikserede egenskaber fra autoprefixer er synlige i det kompilerede resultat. Kør vite build, og undersøg dist/assets/*.css for at kontrollere cssnano-minificeringen.

LightningCSS som alternativ

Vite understøtter nu lightningcss som et hurtigere alternativ til PostCSS. Det håndterer automatisk tilføjelse af præfikser, indlejring og minificering i ét Rust-baseret gennemløb:

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

Optimering af produktionskompilering

Aktivér altid kun cssnano (eller lightningcss-minificering) i produktionskompileringer. Udviklingskompileringer bør generere læsbar CSS med source maps, så fejlfinding bliver nemmere.

Hurtigt tjek

Hvor foregår PostCSS-behandlingen i webpacks CSS-loaderkæde?

Besvar den i den interaktive lektion

Opsummering

Vite har indbygget understøttelse af PostCSS via postcss.config.js. webpack bruger postcss-loader efter css-loader. Brug postcss-preset-env til polyfills for moderne CSS. Aktivér kun cssnano i produktionskompileringer. Overvej lightningcss til hurtigere Vite-kompileringer. Generér altid source maps til fejlfinding af transformeret CSS.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “PostCSS i Vite og Webpack” gratis?

Ja — hele teksten til “PostCSS i Vite og Webpack” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “PostCSS i Vite og Webpack”?

Integrér PostCSS i moderne build-pipelines med Vite-konfiguration og webpack-loadere. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “PostCSS i Vite og Webpack”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Hvad PostCSS gør, og hvordan det fungerer
Autoprefixer og cssnano
Brugerdefinerede PostCSS-plugins
PostCSS i Vite og Webpack

← Tilbage til CSS Academy