Integrations

vitePreprocess

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

// svelte.config.js
import { function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroupvitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    preprocess: PreprocessorGroup[];
}
@type{import('@sveltejs/kit').Config}config = {
  preprocess: PreprocessorGroup[]preprocess: [
	function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroupvitePreprocess({
	  VitePreprocessOptions.style?: boolean | InlineConfig | ResolvedConfig | undefined
preprocess style blocks with vite pipeline
style: true,      // default value
	  VitePreprocessOptions.script?: boolean | undefined
preprocess script block with vite pipeline.
Since svelte5 this is not needed for typescript anymore
@defaultfalsescript: false     // default value
	})
  ]
};

export default 
const config: {
    preprocess: PreprocessorGroup[];
}
@type{import('@sveltejs/kit').Config}config;

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)

TypeScript is supported natively in Svelte 5, so if you are using Svelte 5 and you don’t need to use advanced TypeScript features that emit code, you probably don’t need to use vitePreprocess.

Add-ons

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

• prettier (formatting)
• eslint (linting)
• vitest (unit testing)
• playwright (e2e testing)
• lucia (auth)
• tailwind (CSS)
• drizzle (DB)
• paraglide (i18n)
• mdsvex (markdown)
• storybook (frontend workshop)

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 svelte.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.