Vue: How to setup PostCSS nesting in Vite?

user_15971219 0
Viewed 6094

This is what I’ve tried so far:

  1. Installed via npm install postcss-nesting --save-dev

  2. Setup vite.config.js:

import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postcssNesting from 'postcss-nesting';

export default defineConfig({
    plugins: [
        vue(),
        postcssNesting
    ],
  
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
});

But it’s not working. What’s the right way to setup PostCSS so that I can use CSS nesting?

Thanks!

postcss vite vuejs3 vue.js installation
2 Answers

I was able to get it work like this:

import { defineConfig } from "vite";
import postcssNesting from 'postcss-nesting';

export default defineConfig({
    css: {
        postcss: {
            plugins: [
                postcssNesting
            ],
        },
    },
});
user_78870

Just create a file on the root of your project called postcss.config.js:

module.exports = {
  plugins: {
    'postcss-nesting': { /* plugin options */ },
  },
}

Vite uses postcss-load-config which means that it can pick up the postcss config file (file name can be one of the many formats supported by this package e.g. postcss.config.js, .postcssrc, .postcssrc.js etc).

If you want nesting with PostCSS just like you do it in SASS, I suggest you use postcss-nested.

If you want to use it together with TailwindCSS, you don't have to install it since it's included directly in the tailwindcss package itself:

// postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

TailwindDocs: Nesting

user_63851840
Related