Integrations

vitePreprocess

プロジェクトに vitePreprocess を含めることで、Vite がサポートする様々な CSS のフレーバー (PostCSS、SCSS、Less、Stylus、SugarSS) を使用することができます。プロジェクトを TypeScript でセットアップすると、TypeScript はデフォルトで含まれるようになります:

// 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()]
};

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

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

Add-ons

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

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

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 をする方法に関する多くの質問に対する回答があるので、、もしまだ不明点があるようでしたら役に立つかもしれません。