統合

vitePreprocess

vitePreprocessをプロジェクトに含めることで、ViteがサポートするさまざまなCSSフレーバー（PostCSS、SCSS、Less、Stylus、SugarSS）を使用できるようになります。TypeScriptでプロジェクトをセットアップした場合、デフォルトで含まれます。

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

Svelte 4でTypeScriptを使用している場合も、プリプロセッサを使用する必要があります。TypeScriptはSvelte 5では型構文のみを使用している場合、ネイティブでサポートされます。Svelte 5でより複雑なTypeScript構文を使用するには、プリプロセッサが依然として必要であり、vitePreprocess({ script: true })を使用できます。

アダー

npx sv addを実行すると、次のようないくつかの異なる複雑な統合を1つのコマンドでセットアップできます。

• prettier（フォーマット）
• eslint（リント）
• vitest（ユニットテスト）
• playwright（E2Eテスト）
• lucia（認証）
• tailwind（CSS）
• drizzle（DB）
• paraglide（i18n）
• mdsvex（マークダウン）
• storybook（フロントエンドワークショップ）

ディレクトリ

SvelteおよびSvelteKitで使用できるsveltesociety.devで、パッケージとテンプレートの完全なリストをご覧ください。

追加の統合

svelte-preprocess

svelte-preprocessには、Pug、Babel、グローバルスタイルなど、vitePreprocessにはない追加の機能があります。ただし、vitePreprocessの方が高速で設定が少なくて済む場合があるため、デフォルトで使用されています。 CoffeeScriptはSvelteKitではサポートされていないことに注意してください。

svelte-preprocessをnpm install --save-dev svelte-preprocessでインストールし、svelte.config.jsに追加する必要があります。その後、npm install -D sassやnpm install -D lessなど、対応するライブラリをインストールする必要があることがよくあります。

Viteプラグイン

SvelteKitプロジェクトはViteで構築されているため、Viteプラグインを使用してプロジェクトを強化できます。vitejs/awesome-viteで利用可能なプラグインのリストをご覧ください。

統合に関するFAQ

SvelteKit FAQには、SvelteKitでXを使用する方法が記載されており、質問が残っている場合に役立つ場合があります。