Vite
Vite
Vite 기반 React 프로젝트에 shadcn/ui를 설치하는 방법을 알려드릴게요. Tailwind 설정부터 경로 별칭, CLI 실행까지 필요한 과정을 순서대로 살펴볼게요.
출처: 문서
본문
프로젝트 만들기
vite를 사용해 새 React 프로젝트를 만들어요.
npm create vite@latest
Tailwind와 설정 추가
tailwindcss와 peer 의존성을 설치하고, tailwind.config.js와 postcss.config.js 파일을 생성해요.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
메인 CSS 파일(src/index.css가 이 경우에 해당)에 이 import 헤더를 추가해요.
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */
tailwind.config.js에서 tailwind 템플릿 경로를 설정해요.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}
tsconfig.json 파일 편집
현재 버전의 Vite는 TypeScript 설정을 세 파일로 나눠 두는데, 그중 두 파일을 편집해야 해요. tsconfig.json과 tsconfig.app.json 파일의 compilerOptions 섹션에 baseUrl과 paths 속성을 추가해요.
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
tsconfig.app.json 파일 편집
IDE에서 경로를 해석할 수 있도록 tsconfig.app.json 파일에 다음 코드를 추가해요.
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
vite.config.ts 업데이트
앱이 오류 없이 경로를 해석하도록 vite.config.ts에 다음 코드를 추가해요.
npm install -D @types/node
import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
CLI 실행
shadcn-ui init 명령어를 실행해 프로젝트를 설정해요.
npx shadcn@latest init
components.json 구성
components.json을 구성하기 위해 몇 가지 질문을 받게 돼요.
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
끝!
이제 프로젝트에 컴포넌트를 추가할 수 있어요.
npx shadcn@latest add button
위 명령어가 프로젝트에 Button 컴포넌트를 추가해 줘요. 그런 다음 이렇게 import 하면 됩니다.
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}