CSS Academy · Lekcja

PostCSS w Vite i Webpack

Integruj PostCSS z nowoczesnymi potokami budowania, korzystając z konfiguracji Vite i loaderów webpack.

PostCSS w Vite i Webpack to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

PostCSS w Vite

Vite ma wbudowaną obsługę PostCSS. Należy utworzyć plik postcss.config.js w katalogu głównym projektu, a Vite automatycznie zastosuje jego konfigurację do wszystkich plików CSS podczas pracy deweloperskiej i budowania.

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

Opcje CSS w Vite

Można też skonfigurować PostCSS bezpośrednio w pliku vite.config.js:

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

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

PostCSS w webpacku

webpack używa postcss-loader w łańcuchu reguł modułów. Należy zawsze umieścić go za css-loader i przed wszystkimi innymi transformacjami CSS:

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

postcss-loader z plikiem konfiguracji

Należy wskazać zewnętrzny plik konfiguracji dla postcss-loader:

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

PostCSS z Sass w Vite

Vite najpierw przetwarza Sass, a następnie PostCSS. Należy zainstalować sass i wtyczki PostCSS — Vite automatycznie obsłuży cały potok:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env konwertuje nowoczesny CSS (zagnieżdżanie, własne media itd.) do postaci zgodnej z przeglądarkami — podobnie jak Babel w przypadku JavaScript. Należy skonfigurować docelowy etap:

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

Moduły CSS z PostCSS

Moduły CSS (z ograniczonym zakresem nazw klas) integrują się z PostCSS zarówno w Vite, jak i w webpacku. Najpierw przetwarzają CSS za pomocą PostCSS, a dopiero potem stosują ograniczenie zakresu modułu.

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

Sprawdzanie, czy PostCSS jest stosowany

W narzędziach deweloperskich Vite należy wyświetlić mapy źródłowe przekształconego CSS. Właściwości z prefiksami dodanymi przez autoprefixer będą widoczne w skompilowanym wyniku. Należy uruchomić vite build i sprawdzić pliki dist/assets/*.css, aby zweryfikować minifikację cssnano.

LightningCSS jako alternatywa

Vite obsługuje teraz lightningcss jako szybszą alternatywę dla PostCSS. Obsługuje ono dodawanie prefiksów producentów, zagnieżdżanie i minifikację w jednym przebiegu Rust:

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

Optymalizacja kompilacji produkcyjnej

cssnano (lub minifikację za pomocą lightningcss) należy włączać tylko w kompilacjach produkcyjnych. Kompilacje deweloperskie powinny generować czytelny CSS z mapami źródłowymi, aby ułatwić debugowanie.

Szybkie sprawdzenie

W którym miejscu łańcucha loaderów CSS webpacka odbywa się przetwarzanie PostCSS?

Podsumowanie

Vite ma wbudowaną obsługę PostCSS za pośrednictwem postcss.config.js. webpack używa postcss-loader za css-loader. postcss-preset-env służy do zapewniania zgodności z nowoczesnymi funkcjami CSS. cssnano należy włączać tylko w kompilacjach produkcyjnych. W celu przyspieszenia kompilacji Vite warto rozważyć lightningcss. Aby ułatwić debugowanie przekształconego CSS, należy zawsze generować mapy źródłowe.

Często zadawane pytania

Czy lekcja „PostCSS w Vite i Webpack” jest bezpłatna?

Tak — pełny tekst „PostCSS w Vite i Webpack” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „PostCSS w Vite i Webpack”?

Integruj PostCSS z nowoczesnymi potokami budowania, korzystając z konfiguracji Vite i loaderów webpack. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „PostCSS w Vite i Webpack”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy