Webpack

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

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

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

pnpm add @seed-design/react @seed-design/css @seed-design/webpack-plugin

yarn add @seed-design/react @seed-design/css @seed-design/webpack-plugin

bun add @seed-design/react @seed-design/css @seed-design/webpack-plugin

index.tsx

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

vite.config.ts

+import { SeedDesignPlugin } from '@seed-design/webpack-plugin';

export default defineConfig({
  plugins: [
+    new SeedDesignPlugin()
  ]
})

npx @seed-design/cli@latest init

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

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

seed-design.json

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

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

tsconfig.json

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