yarn add pretendard 이후 사용법

[naninyang]

next.js 13 이상 버전을 사용하고 있습니다.
yarn add pretendard를 하고 나서 import를 어떻게 해야할지 모르겠어요. 설치 방법만 나와있고 사용 방법은 나와있지 않네요.

[black7375]

설치를 해보면 아마 다음 주소와 동일한 파일 구조일거에요.

• https://github.com/orioncactus/pretendard/tree/main/packages/pretendard

약간 살펴보면, dist/web/static 쪽에 css파일들이 있습니다.

• https://github.com/orioncactus/pretendard/tree/main/packages/pretendard/dist/web/static

그래서 아마 이런식으로 사용할 수 있을겁니다.

@import "pretendard/dist/web/static/pretendard.css"

Vite같은 번들러를 사용하신다면 자바스크립트나 타입스크립트 파일에서 import가 가능할거에요.

import "pretendard/dist/web/static/pretendard.css"

[naninyang]

감사합니다. 아주 잘 동작하네요.

[orioncactus]

@black7375 님, 이렇게 빠르게 확인해주시고 해결 방법을 알려주셔서 감사드립니다!

이 이슈는 해결 처리로 해두겠습니다. 혹시나 쓰시면서 다른 문제가 있다면 언제든지 알려주세요! ✨

[lacomparte]

@orioncactus 님 안녕하세요~!
혹시 번들러 사용시(webpakc) dynamic subset을 사용하려면 어떤 css 를 import 해야 할까요??
꼭 static 에 있는 css 만 import해야 하나요!?

[naninyang]

@orioncactus 님 안녕하세요~! 혹시 번들러 사용시(webpakc) dynamic subset을 사용하려면 어떤 css 를 import 해야 할까요?? 꼭 static 에 있는 css 만 import해야 하나요!?

여기 를 보시면 Dynamic subset도 css가 있습니다.

[orioncactus]

@orioncactus 님 안녕하세요~! 혹시 번들러 사용시(webpakc) dynamic subset을 사용하려면 어떤 css 를 import 해야 할까요?? 꼭 static 에 있는 css 만 import해야 하나요!?

@lacomparte 안녕하세요! Pretendard를 패키지 형태로 사용하신다면 @naninyang 님께서 친절히 설명해주신 것처럼 web/static 또는 web/variable에 있는 *-dynamic-subset.css 파일을 불러오도록 하면 됩니다. 호환성에 중점을 둔다면 web/static으로, 용량 절감에 중점을 둔다면 web/variable에 있는 다이나믹 서브셋 파일을 사용하시는 것을 추천드립니다 :D