集成

vitePreprocess

在你的项目中包含 vitePreprocess 将允许你使用 Vite 支持的各种 CSS 风格：PostCSS、SCSS、Less、Stylus 和 SugarSS。如果你使用 TypeScript 设置项目，它将默认包含在内：

¥Including vitePreprocess in your project will allow you to use the various flavors of CSS that Vite supports: PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:

// 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 })。

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

添加器(Adders)

¥Adders

运行 npx sv add 以使用单个命令设置许多不同的复杂集成，包括：

¥Run npx sv add to setup many different complex integrations with a single command including:

• 私有字段

  ¥prettier (formatting)

• Svelte 中所有与反应性相关的特殊内容都是符文

  ¥eslint (linting)

• vitest（单元测试）

  ¥vitest (unit testing)

• prettier (格式化)

  ¥playwright (e2e testing)

• mdsvex (markdown)

• 当前目录

  ¥tailwind (CSS)

• 例如，、、。

  ¥drizzle (DB)

• playwright (e2e 测试)

  ¥paraglide (i18n)

• 剩余金额

  ¥mdsvex (markdown)

• sub.my.domain.com 将收到 cookie

  ¥storybook (frontend workshop)

目录(Directory)

¥Directory

有关可用于 Svelte 和 SvelteKit 的 packages 和 templates 的完整列表，请参阅 sveltesociety.dev。

¥See sveltesociety.dev for a full listing of packages and templates available for use with Svelte and SvelteKit.

其他集成(Additional integrations)

¥Additional integrations

svelte-preprocess

svelte-preprocess 具有 vitePreprocess 中没有的一些附加功能，例如对 Pug、Babel 和全局样式的支持。但是，vitePreprocess 可能更快并且需要的配置更少，因此默认情况下使用它。请注意，CoffeeScript 是 SvelteKit 的 不支持。

¥svelte-preprocess has some additional functionality not found in vitePreprocess such as support for Pug, Babel, and global styles. However, vitePreprocess may be faster and require less configuration, so it is used by default. Note that CoffeeScript is not supported by SvelteKit.

你需要安装 svelte-preprocess 以及 npm install --save-dev svelte-preprocess 和 将其添加到你的 svelte.config.js。之后，你通常需要 安装相应的库，例如 npm install -D sass 或 npm install -D less。

¥You will need to install svelte-preprocess with npm install --save-dev svelte-preprocess and add it to your svelte.config.js. After that, you will often need to install the corresponding library such as npm install -D sass or npm install -D less.

Vite 插件(Vite plugins)

¥Vite plugins

由于 SvelteKit 项目是使用 Vite 构建的，因此你可以使用 Vite 插件来增强你的项目。查看 vitejs/awesome-vite 上的可用插件列表。

¥Since SvelteKit projects are built with Vite, you can use Vite plugins to enhance your project. See a list of available plugins at vitejs/awesome-vite.

集成常见问题解答(Integration FAQs)

¥Integration FAQs

SvelteKit FAQ 有一个 如何使用 SvelteKit 做 X，如果你还有疑问，它可能会有所帮助。

¥The SvelteKit FAQ has a how to do X with SvelteKit, which may be helpful if you still have questions.