Vite

Vite 프로젝트에서 Seed Design을 설치하고 사용하는 방법을 알아봅니다.

의존성 설치

필요한 의존성들을 설치해요.

npm install @seed-design/react @seed-design/css

base.css import하기

index.tsx

import "@seed-design/css/base.css";

seed-design.json 생성하기

init 명령어 입력하기

npx @seed-design/cli@latest init

seed-design 설정

◇  TypeScript를 사용중이신가요?
│  Yes
│
◇  React Server Components를 사용중이신가요?
│  No
│
◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│  ./seed-design

아래 파일을 프로젝트 루트에 생성해주세요.

seed-design.json

{
  "rsc": false,
  "tsx": true,
  "path": "./seed-design"
}

tsconfig.json 설정하기

위에서 설정한 seed-design.json path의 경로와 동일해야 해요.

tsconfig.app.json

{
  "compilerOptions": {
    // ... your options
    "paths": {
      "seed-design/*": [
        "./seed-design/*"
      ]
    }
  }
}

Vite config 수정하기

npm install -D @seed-design/vite-plugin vite-tsconfig-paths

seedDesignPlugin은 theming 및 CSS 파일 자동 로드 등을 담당해요.

vite.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { seedDesignPlugin } from "@seed-design/vite-plugin"; 
import tsconfigPaths from "vite-tsconfig-paths"; 

export default defineConfig({
  plugins: [
    react(),
    seedDesignPlugin(), 
    tsconfigPaths(), 
  ],
});

컴포넌트를 한번 사용해볼까요?

npx @seed-design/cli@latest add ui:action-button

Getting Started with Stackflow

SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.

Vite

Getting Started with Stackflow

On this page