0Pricing
CSS Academy · Lesson

PostCSS in Vite and Webpack

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

PostCSS in Vite and Webpack is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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()]
    }
  }
});

PostCSS in webpack

webpack uses postcss-loader in the module rules chain. Always place it after css-loader and before any other CSS transformations:

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

postcss-loader with Config File

Point postcss-loader to an external config file:

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

PostCSS with Sass in Vite

Vite processes Sass first, then PostCSS. Install sass and postcss plugins — Vite handles the pipeline automatically:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env converts modern CSS (nesting, custom media, etc.) to browser-compatible CSS — similar to Babel for JavaScript. Configure the target stage:

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

CSS Modules with PostCSS

CSS Modules (scoped class names) integrate with PostCSS in both Vite and webpack. They process CSS through PostCSS before applying module scoping.

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

Checking PostCSS is Applied

In Vite DevTools, view the transformed CSS source maps. Prefixed properties from autoprefixer will be visible in the compiled output. Run vite build and inspect dist/assets/*.css to verify cssnano minification.

LightningCSS as Alternative

Vite now supports lightningcss as a faster alternative to PostCSS. It handles autoprefixing, nesting, and minification in a single Rust pass:

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

Production Build Optimization

Always enable cssnano (or lightningcss minification) only for production builds. Development builds should output readable, source-mapped CSS for easier debugging.

Quick Check

Where does PostCSS processing occur in a webpack CSS loader chain?

Recap

Vite has built-in PostCSS support via postcss.config.js. webpack uses postcss-loader after css-loader. Use postcss-preset-env for modern CSS polyfills. Enable cssnano only for production builds. Consider lightningcss for faster Vite builds. Always generate source maps for debugging transformed CSS.

Frequently asked questions

Is the “PostCSS in Vite and Webpack” lesson free?

Yes — the full text of “PostCSS in Vite and Webpack” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “PostCSS in Vite and Webpack”?

Integrate PostCSS into modern build pipelines using Vite configuration and webpack loaders. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “PostCSS in Vite and Webpack” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

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