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[];
}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
@default
falsescript: false     // default value
	})
  ]
};

export default 
const config: {
    preprocess: PreprocessorGroup[];
}
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

npx sv add を実行することで、様々な複雑なインテグレーションを単一のコマンドでセットアップすることができます:

• 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

厳選された高品質な Svelte パッケージの一覧については パッケージページ をご覧ください。また、追加のライブラリ、テンプレート、リソースについては sveltesociety.dev をご覧ください。

Additional integrations

svelte-preprocess

svelte-preprocess は、Pug、Babel、global styles のサポートなど、vitePreprocess には無い機能があります。しかし、vitePreprocess はより速く、設定が少ないため、デフォルトでは vitePreprocess が使用されます。SvelteKit は CoffeeScript を サポートしていない ことにご注意ください。

svelte-preprocess をインストールするには npm i -D svelte-preprocess を実行し、ご自身で svelte.config.js に追加する 必要があります。その後、npm i -D sass や npm i -D less など、対応するライブラリのインストール が必要になることが多いようです。

Vite plugins

SvelteKit プロジェクトは Vite で構築されているため、Vite plugin を使用してプロジェクトを拡張することができます。利用可能な plugin のリストは vitejs/awesome-vite をご覧ください。

Integration FAQs

SvelteKit FAQ にて、SvelteKit で X をする方法に関する多くの質問に対する回答があるので、、もしまだ不明点があるようでしたら役に立つかもしれません。