Vite

Vite 프로젝트에서 shadcn-svelte를 설정하는 방법입니다.

TailwindCSS 추가

Svelte CLI를 사용하여 프로젝트에 Tailwind CSS를 추가합니다.

pnpm dlx sv add tailwindcss

npx sv add tailwindcss

npx sv add tailwindcss

bun x sv add tailwindcss

tsconfig.json 파일 수정

현재 버전의 Vite는 TypeScript 설정을 세 개의 파일로 분리하며, 그 중 두 개를 수정해야 합니다. tsconfig.json과 tsconfig.app.json 파일의 compilerOptions 섹션에 baseUrl과 paths 속성을 추가합니다:

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"]
    }
  }
}

tsconfig.app.json 파일 수정

IDE에서 경로를 해석할 수 있도록 tsconfig.app.json 파일에 다음 코드를 추가합니다:

tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"]
    }
  }
}

vite.config.ts 업데이트

앱이 경로를 오류 없이 해석할 수 있도록 vite.config.ts에 다음 코드를 추가합니다:

vite.config.ts

import path from "path";
 
export default defineConfig({
  // ... other options
  resolve: {
    alias: {
      $lib: path.resolve("./src/lib"),
    },
  },
});

CLI 실행

pnpm dlx shadcn-svelte@latest init

npx shadcn-svelte@latest init

npx shadcn-svelte@latest init

bun x shadcn-svelte@latest init

components.json 설정

components.json을 설정하기 위해 몇 가지 질문을 받게 됩니다:

Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/routes/layout.css
Configure the import alias for lib: › $lib
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils
Configure the import alias for hooks: › $lib/hooks
Configure the import alias for ui: › $lib/components/ui

완료

이제 프로젝트에 컴포넌트를 추가할 수 있습니다.

pnpm dlx shadcn-svelte@latest add button

npx shadcn-svelte@latest add button

npx shadcn-svelte@latest add button

bun x shadcn-svelte@latest add button

위 명령어는 프로젝트에 Button 컴포넌트를 추가합니다. 다음과 같이 import할 수 있습니다:

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button>Click me</Button>

SvelteKit Astro