사이드 프로젝트
storybook 내에서 module alias 설정하기
jfmam
2023. 3. 23. 14:26
문제
import {} from '@/styles/~.scss'
- import 시 module alias를 인식하지 못하는 문제 발생
해결방법
- tsconfig 설정
- storybook main.js 설정
tsconfig 설정
https://nextjs.org/docs/advanced-features/module-path-aliases
- nextjs에서 module alias를 설정하는 방법을 보고 적용해 보았다.
- ts config에서 paths와 baseurl을 설정해서 module alias를 구현한다.
"paths": {
"@/*": ["./*"] // tsconfig 파일 위치 기준
},
"baseUrl": "."
// hierarchy
- tsconfig.json
- pages
- .storybook
- components
- styles
...
- paths를 통해 module alias를 구현한다.
- base url을 설정하여 root project를 설정한다.
storybook main.js 설정하기
- storybook webpack 설정을 통해 module alias를 인식 할 수 있게 설정해준다.
- 여러가지 방법이 있는데 tsconfig-paths-webpack-plugin를 사용해 tsconfig의 path config를 가져와서 적용하는 방식을 채택 하였다.
reference
https://stackoverflow.com/questions/66444895/how-to-resolve-aliases-in-storybook
How to resolve aliases in Storybook?
I have a React/Typescript project with Storybook. Storybook works great, but as soon as I start importing files with aliases, it crashes. Example: import Foo from "@components/foo" => crash ...
stackoverflow.com