Svelte 项目配置

Vite 支持通过官方插件开发 Svelte 项目，配置简洁高效。

基础 Svelte 配置

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()]
})

Svelte 插件选项

export default defineConfig({
  plugins: [
    svelte({
      // 编译选项
      compilerOptions: {
        dev: true,
        css: 'injected'
      },
      // 预处理器
      preprocess: [
        sveltePreprocess()
      ]
    })
  ]
})

插件选项说明

预处理器配置

npm add -D svelte-preprocess

import sveltePreprocess from 'svelte-preprocess'

export default defineConfig({
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        // Sass 支持
        scss: {
          prependData: `@import 'src/styles/variables.scss';`
        },
        // PostCSS 支持
        postcss: true
      })
    })
  ]
})

注意：svelte-preprocess 支持 Sass、Less、PostCSS 等预处理器。

Svelte 项目依赖

npm add svelte
npm add -D @sveltejs/vite-plugin-svelte svelte-preprocess

Svelte 组件示例

<script>
  let count = 0

  function increment() {
    count += 1
  }
</script>

<button on:click={increment}>
  Clicked {count} times
</button>

<style>
  button {
    font-size: 18px;
  }
</style>

TypeScript 支持

npm add -D @tsconfig/svelte

// tsconfig.json
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"]
}

要点总结

• @sveltejs/vite-plugin-svelte 支持 Svelte
• preprocess 配置预处理器
• compilerOptions 控制编译行为
• svelte-preprocess 支持多种 CSS 预处理器