SvelteKitAppendix

Integrations

vitePreprocess

Including vitePreprocess in your project will allow you to use the various flavors of CSS that Vite supports: PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:

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

export default {
  preprocess: PreprocessorGroup[]preprocess: [function vitePreprocess(opts?: VitePreprocessOptions | undefined): import("svelte/compiler").PreprocessorGroupvitePreprocess()]
};

You will also need to use a preprocessor if you’re using TypeScript with Svelte 4. TypeScript is supported natively in Svelte 5 if you’re using only the type syntax. To use more complex TypeScript syntax in Svelte 5, you will need still need a preprocessor and can use vitePreprocess({ script: true }).

Adders

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)

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 install --save-dev svelte-preprocess and add it to your svelte.config.js. After that, you will often need to install the corresponding library such as npm install -D sass or npm install -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 has a how to do X with SvelteKit, which may be helpful if you still have questions.

Edit this page on GitHub

previous next

Frequently asked questions Breakpoint Debugging