Home/Blog/Minify CSS in VS Code
CSS · VS Code

Minify CSS in VS Code — 4 Methods

4 min readUpdated April 2026Developer Tools
Working in VS Code and need to minify your CSS? Here are four methods — from zero-config extensions to build pipelines — so you can pick what fits your project.

CSS Beautifier & Minifier

Minify CSS instantly online. No extensions, no build tools needed.

Open CSS Beautifier & Minifier →

Method 1 — Online CSS minifier (fastest, no setup)

For a quick one-off minification without installing anything, use the CSS minifier on tinybench.dev. Paste your CSS, click Minify, copy the result. Works for any project regardless of your build setup.

For more context on what minification does and why it matters, see the CSS minification guide.

Method 2 — VS Code extension (CSS Minifier)

The simplest VS Code approach is to install a minification extension:

  1. Open VS Code
  2. Press Ctrl+Shift+X to open Extensions
  3. Search for "CSS Minifier" or "Minify"
  4. Install "Minify" by HookyQR (most popular)
  5. Open your CSS file, press Ctrl+Shift+P → type "Minify" → select Minify Document
Result: The extension writes a new filename.min.css file alongside your original — it doesn't overwrite your source.

Method 3 — VS Code task with cssnano

For automatic minification on save inside VS Code:

Terminal — install cssnano
npm install cssnano postcss postcss-cli --save-dev
postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({ preset: 'default' })
  ]
};
package.json script
"scripts": {
  "minify:css": "postcss src/style.css -o dist/style.min.css"
}

Run npm run minify:css from the VS Code terminal to minify. Add a --watch flag to auto-minify on every save.

Method 4 — Vite or webpack (build pipeline)

If you're using Vite, webpack, or Parcel — CSS minification is automatic in production builds:

Vite
# Vite minifies CSS automatically during production build
npm run build
webpack — css-minimizer-webpack-plugin
npm install css-minimizer-webpack-plugin --save-dev

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: ['...', new CssMinimizerPlugin()]
  }
};

Frequently asked questions

Does minifying CSS break my styles?
No — proper minification only removes whitespace, comments, and applies safe shorthand transformations. Your styles render identically. Always keep your original unminified source file.
How much does CSS minification reduce file size?
Typically 20–40%. Combined with gzip compression from your server, total savings can reach 70–80% compared to uncompressed unminified CSS.
Should I commit minified CSS to git?
For most projects, no — generate it during CI/CD build. Add *.min.css to .gitignore and minify as part of your deployment pipeline. This keeps your repo clean and avoids merge conflicts in generated files.

Try it free — no sign-up needed

Runs entirely in your browser. Nothing uploaded, nothing stored.

Open CSS Beautifier & Minifier →

Related tools & guides