0Pricing
CSS Academy · Lesson

PostCSS in Vite and Webpack

Integrate PostCSS into modern build pipelines using Vite configuration and webpack loaders.

PostCSS in Vite

Vite has built-in PostCSS support. Create a postcss.config.js file at the project root and Vite automatically applies it to all CSS files during development and 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)
};

Vite CSS Options

Alternatively, configure PostCSS inline in vite.config.js:

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

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

All lessons in this course

  1. What PostCSS Does and How It Works
  2. Autoprefixer and cssnano
  3. Custom PostCSS Plugins
  4. PostCSS in Vite and Webpack
← Back to CSS Academy