集成

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): import("svelte/compiler").PreprocessorGroupvitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    preprocess: PreprocessorGroup[];
}
@type{import('@sveltejs/kit').Config}config = {
  preprocess: PreprocessorGroup[]preprocess: [function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroupvitePreprocess()]
};

export default 
const config: {
    preprocess: PreprocessorGroup[];
}
@type{import('@sveltejs/kit').Config}config;

如果你在 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 }).

附加组件(Add-ons)

¥Add-ons

运行 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)

包(Packages)

¥Packages

查看 软件包页面，获取精选的高质量 Svelte 软件包。你还可以查看 sveltesociety.dev 以获取其他库、模板和资源。

¥Check out the packages page for a curated set of high quality Svelte packages. You can also see sveltesociety.dev for additional libraries, templates, and resources.

其他集成(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 i -D svelte-preprocess 和 将其添加到你的 svelte.config.js。之后，你通常需要 安装相应的库，例如 npm i -D sass 或 npm i -D less。

¥You will need to install svelte-preprocess with npm i -D svelte-preprocess and add it to your svelte.config.js. After that, you will often need to install the corresponding library such as npm i -D sass or npm i -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 常见问题解答 回答了许多关于如何使用 SvelteKit 执行 X 的问题，如果你还有疑问，这可能会有所帮助。

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