이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Astro

Previous Next

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

프로젝트 생성

새로운 Astro 프로젝트를 생성하는 것부터 시작합니다:

pnpm create astro@latest

Astro 프로젝트 구성

프로젝트를 구성하기 위한 몇 가지 질문이 표시됩니다:

- Where should we create your new project?
./your-app-name
- How would you like to start your new project?
Choose a starter template (or Empty)
- Install dependencies?
Yes
- Initialize a new git repository? (optional)
Yes/No

프로젝트에 Svelte 추가

Astro CLI를 사용하여 Svelte를 설치합니다:

pnpm dlx astro add svelte

프로젝트에 TailwindCSS 추가

Astro CLI를 사용하여 Tailwind CSS를 추가합니다:

pnpm dlx astro add tailwind

전역 CSS 파일 불러오기

src/pages/index.astro 파일에 global.css 파일을 불러옵니다:

src/pages/index.astro
---
import "../styles/global.css";
---

경로 별칭 설정

경로를 해석하기 위해 tsconfig.json 파일에 다음 코드를 추가합니다:

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

CLI 실행

프로젝트를 설정하기 위해 shadcn-svelte init 명령어를 실행합니다:

pnpm dlx 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/styles/global.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

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

index.astro
---
import { Button } from "$lib/components/ui/button/index.js";
---
 
<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>