Integrations

vitePreprocess

vitePreprocess preprocesses <style> and <script> tags in .svelte files.

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			preprocess: vitePreprocess({
				style: true,      // default value
				script: false     // default value
			})
		})
	]
});

style

Use vitePreprocess() to enable CSS preprocessors in <style> tags: PostCSS, SCSS, Less, Stylus, and SugarSS.

script

Use vitePreprocess({ script: true }) if:

• your project is before Svelte 5
• you are using advanced TypeScript features that emit code (check vitePreprocess documentation)

Add-ons

Run npx sv add to set up many different complex integrations with a single command including:

• prettier (formatting)
• eslint (linting)
• vitest (unit testing)
• playwright (e2e testing)
• better-auth (auth)
• tailwind (CSS)
• drizzle (DB)
• paraglide (i18n)
• mdsvex (markdown)
• storybook (frontend workshop)
• adapters (hosting)
• mcp (LLM tooling)

Packages

Check out the packages page for a curated set of high quality Svelte packages. You can also see sveltesociety.dev for additional libraries, templates, and resources.

Additional integrations

svelte-preprocess

svelte-preprocess has some additional functionality not found in vitePreprocess such as support for Pug, Babel, and global styles. However, vitePreprocess may be faster and require less configuration, so it is used by default. Note that CoffeeScript is not supported by SvelteKit.

You will need to install svelte-preprocess with npm i -D svelte-preprocess and add it to your vite.config.js. After that, you will often need to install the corresponding library such as npm i -D sass or npm i -D less.

Vite plugins

Since SvelteKit projects are built with Vite, you can use Vite plugins to enhance your project. See a list of available plugins at vitejs/awesome-vite.

Integration FAQs

The SvelteKit FAQ answers many questions about how to do X with SvelteKit, which may be helpful if you still have questions.