整合

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，你也需要使用預處理器。如果你僅使用類型語法，Svelte 5 本身就支援 TypeScript。若要在 Svelte 5 中使用更複雜的 TypeScript 語法，你仍然需要一個預處理器，並且可以使用 vitePreprocess({ script: true })。

加載器

執行 npx sv add 可使用單一指令設定許多不同的複雜整合，包括

• prettier (格式化)
• eslint (程式碼檢查)
• vitest (單元測試)
• playwright (端對端測試)
• lucia (身份驗證)
• tailwind (CSS)
• drizzle (DB)
• paraglide (i18n)
• mdsvex (markdown)
• storybook (前端工作坊)

目錄

請參閱 sveltesociety.dev 以取得可與 Svelte 和 SvelteKit 搭配使用的套件和 範本完整列表。

額外整合

svelte-preprocess

svelte-preprocess 具有 vitePreprocess 中未找到的一些額外功能，例如支援 Pug、Babel 和全域樣式。但是，vitePreprocess 可能更快且需要較少的設定，因此預設使用它。請注意，SvelteKit 不支援 CoffeeScript。

你將需要使用 npm install --save-dev svelte-preprocess 安裝 svelte-preprocess，並將其加入你的 svelte.config.js。之後，你通常需要安裝對應的程式庫，例如 npm install -D sass 或 npm install -D less。

Vite 外掛

由於 SvelteKit 專案是使用 Vite 建置的，你可以使用 Vite 外掛來增強你的專案。請參閱 vitejs/awesome-vite 上可用的外掛列表。

整合常見問題

SvelteKit 常見問題解答中有一個如何在 SvelteKit 中使用 X，如果你仍有疑問，這可能會很有幫助。