Webpack

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

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

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";

webpack.config.ts

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

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

옵션 없이 쓰면 색상 모드가 사용자의 시스템 설정을 따라갑니다. 항상 라이트나 다크로 고정하려면 colorMode를 지정하세요.

옵션	타입	기본값	설명
`colorMode`	`"system" \| "light-only" \| "dark-only"`	`"system"`	전역 색상 모드. `system`은 사용자의 OS 설정을 따릅니다
`injectColorSchemeTag`	`boolean`	`true`	`color-scheme` 메타 태그를 주입할지 여부
`fontScaling`	`boolean`	`false`	iOS에서 사용자의 시스템 글자 크기 설정에 따라 텍스트를 확대·축소할지 여부

webpack.config.ts

new SeedDesignPlugin({ colorMode: "light-only" });

색상 모드가 어떻게 동작하는지는 Theming에서 다룹니다.

npx @seed-design/cli@latest init

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

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

tsconfig.json

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

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