Skip to main content

Integrations

vitePreprocess

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

// vite.config.js
import { function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>

Returns the SvelteKit Vite plugins. Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.

Since version 3.0.0 you must pass configuration directly.

Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.

sveltekit
} from '@sveltejs/kit/vite';
import { function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroupvitePreprocess } from '@sveltejs/vite-plugin-svelte'; import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct {@link UserConfig } object, or a function that returns it. The function receives a {@link ConfigEnv } object.

defineConfig
} from 'vite';
export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct {@link UserConfig } object, or a function that returns it. The function receives a {@link ConfigEnv } object.

defineConfig
({
UserConfig.plugins?: PluginOption[] | undefined

Array of vite plugins to use.

plugins
: [
function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>

Returns the SvelteKit Vite plugins. Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.

Since version 3.0.0 you must pass configuration directly.

Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.

sveltekit
({
preprocess?: Arrayable<PreprocessorGroup> | undefined

An array of preprocessors to transform the Svelte source code before compilation

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

@default
false
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)

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

Edit this page on GitHub llms.txt