매일 해내는 개발/Next.js2 Next.js에서 vanilla-extract 사용 시 storybook 설정하는 방법 + 예시 코드 vanilla-extract는 linaria에 비해 공식문서가 잘 되어 있고, next용 plug-in도 따로 제공해줘서 어렵지 않게 설정 할 수 있었다.하지만 Storybook을 적용하려니 또 난관에 부딪혔다.조금 더 찾아보니 이것도 셋팅이 필요했다!storybook 공식 문서 > setup에서 vanilla-extract를 셋팅하는 방법을 제공해 주고 있었다. https://storybook.js.org/recipes/@vanilla-extract/css Integrate Vanilla Extract with Storybook | StorybookGet zero-runtime stylesheets in TypeScript.storybook.js.orgpnpm 사용 시 다음과 같이 설치를 진행 해주면 .. 2024. 5. 29. Next14 ES 모듈에서 linaria 스타일 사용하기 / config 설정 Using linaria with Next.js 14 ES module리뉴얼 프로젝트를 시작 하기 위해 프레임워크는 Next 14 app router를 사용하기로 했는데기존에 emotion을 사용하던 환경이라 style 라이브러리를 새로 결정해야 했다.우선 여러 후보 중 vanilla-extract 와 linaria 둘로 좁혀졌다.나는 linaria를 poc 해보기로했는데 공식문서의 불친절..함으로 여러 문제에 직면했다.https://linaria.dev/next 설치가 돼있는 상태에서 다음 과정을 따라하면 쉽게 linaria를 사용할 수 있다.linaria는 zero-runtime css-in-js이므로 런타임이 아닌 빌드 타임에 컴파일하기때문에 JavaScript 코드에서 이 CSS 파일을 로드하는 .. 2024. 5. 22. 이전 1 다음
