SvelteKit 目前是 beta 版本，本文可能只适用于 SvelteKit v1.0.0-next.102
首先我们用 SvelteKit 新建一个项目
1npm init [email protected] my-app
2cd my-app
3npm install
4npm run dev -- --open
为项目添加 @sveltejs/adapter-static 适配器以支持编译静态网页。
1npm i -D @sveltejs/[email protected]
在 svelte.config.js 文件中添加相关参数
1// svelte.config.js
2import adapter from '@sveltejs/adapter-static';
3
4export default {
5 kit: {
6 adapter: adapter({
7 // default options are shown
8 pages: 'build',
9 assets: 'build',
10 fallback: null
11 })
12 }
13};
为项目添加 Tailwind CSS
1npx svelte-add tailwindcss --jit
使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式
1@tailwind base; /* Preflight will be injected here */
2@tailwind components;
3@tailwind utilities;
Tailwind 将在构建时将这些指令替换为基于配置的设计系统生成的所有样式。
构建
1npm run build