본문 바로가기

에러노트

[에러노트] storybook에서 globalStyle 적용하기 - styledComponenet

 

Decorators

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular

storybook.js.org

 

 

 

문제 상황 : 

스토리북에서 globalStyle을 사용하고 싶다면, decorator를 이용하라고 소개해주고 있다. 

https://storybook.js.org/docs/react/writing-stories/decorators

데코레이터에 내가 만들어둔 GlobalStyles를 가져오려는데, 계속 에러가 발생한다. 

resolve 할 수 없댄다. 

이렇게 가져오고 있는 상태 

 

현재 나는 @theme으로 절대 경로를 지정해두었는데, 무슨 이유에서인지, 

스토리북의 preview.js 파일에서는 이런 식으로 import해오면 문제가 생기는 것 같다. 


해결책 : 

결론은 상대경로로 바꾸어 주었다는 것이다. 이렇게 하니까 문제가 해결되었다. 

 

 

 


결론 : 

이것 때문에 약간의 삽질을 했던 것 같은데, 혹시나 나와 같이 preview.js에서 절대경로로 파일을 가져오려다가 에러를 만나시는 분이 있으면, 이 글을 읽고 얼른 삽질에서 벗어나기를 바란다.