集成

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（数据库）
• paraglide（国际化）
• 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 FAQ 有一个如何在 SvelteKit 中使用 X 的部分，如果您还有问题，这可能会有帮助。