集成

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 可能更快并且需要更少的配置，因此它被默认使用。请注意，CoffeeScript不受 SvelteKit 支持。

您需要使用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 常见问题解答包含一个如何使用 X 与 SvelteKit 部分，如果您仍然有疑问，这可能会有所帮助。