How to Use PostCSS with Sveltekit

Install PostCSS in your SvelteKit project with only a few steps.

1. Create a New SvelteKit Project

npm create svelte@latest app
cd app
npm install

2. Install PostCSS and PostCSS Plugins

npm install -D postcss autoprefixer postcss-nested

3. Create a PostCSS Config File

Add a new file called postcss.config.js in the same folder as vite.config.js

import autoprefixer from 'autoprefixer'
import nested from 'postcss-nested'

/** @type {import('postcss-load-config').Config} */
const config = {
    plugins: [autoprefixer, nested]
}

export default config

4. Add vitePreprocess to svelte.config.js

Open svelte.config.js and add vitePreprocess() if it's not already there

import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    },
    preprocess: vitePreprocess()
}

export default config

5. Add vitePreprocess to svelte.config.js

Open src/routes/+page.svelte and add nested css

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<style>
    p {
        a {
            color: purple;
        }
    }
</style>

6. Run Your Project

npm run dev

PostCSS should now be working with your SvelteKit project. If you get this error quit out of VSCode and re-open it.

Colon is expected

If you expect this syntax to work, here are some suggestions: If you use less/SCSS with svelte-preprocess, did you add lang="scss"/lang="less" to your style tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting svelte.language-server.runtime, or use sass instead of node-sass. Did you setup a svelte.config.js? See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.