storybook 내에서 module alias 설정하기

문제

import {} from '@/styles/~.scss'

• import 시 module alias를 인식하지 못하는 문제 발생

해결방법

1. tsconfig 설정
2. 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
...

1. paths를 통해 module alias를 구현한다.
2. base url을 설정하여 root project를 설정한다.

storybook main.js 설정하기

1. storybook webpack 설정을 통해 module alias를 인식 할 수 있게 설정해준다.
2. 여러가지 방법이 있는데 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?