문제 해결 과정

scss를 해당 프로젝트에서 처음 써보기 때문에 프로젝트를 본격적으로 들어가기전 storybook에 잘 적용되는지 실험해봤다. 그래서 위와 같은 버튼을 만들고 storybook을 실행시켜서 제대로 나오는지 확인하는 작업을 거쳤다
먼저 storybook 공식문서에 scss 관련해서 무엇을 설정해야하는지 보았다

이런 내용을 보았고,
먼저 WEBPACK 5인지 아닌지 부터 알아야겠네🧐 라고 생각하고 확인 했다.
에러는 나겠지만 일단 실행부터 해보았다.
이러한 내용을 보았고 Webpack5인것을 확인했다.
그래서 그대로 다운로드 했고, 그대로 설정하고 실행을 하였다.

하지만 위와 같은 문제를 맞이하게 되었다.
공식문서에서 하라는 것을 다했는데 무엇이 문제인지 찾아보았다.
먼저, 내가 이상한 버전을 확인해서 다운로드했는지 부터 확인했다
내가 본것은 확실히 최신버전과 typescript버전이 맞았다.
그렇다면, 이 오류와 같은 오류가 난 사람이 있는지 찾아보았다
먼저, 공식 github 채널에 Issues에 가보았다

나와 같은 에러가 난사람이 있어서 Issues 페이지에 올라온것을 확인할 수 있었고, 밑에 있는 ERR! SassError라고 적힌 글을 클릭해서 보았다.

에러가 나와 같은 것을 확인할 수 있다.

Storybook의 유지보수를 하고 있는 개발자 한분이 적절한 답변을 해주시는 것을 보고 따라서 차근차근 진행해보았다.

해결방법은 위의 답변과 같은 storybook-addon-sass-postcss 이것을 공식문서에서는 다운로드 하라고 되어있었는데 이것을 지우는 것이였다.

그리고 scss-preset또한 지웠다.

   {
      name: '@storybook/addon-styling',
      options: {},
    },
  ],

아직 addon을 다운받은 상태가 아니라서 google에 addon styling scss를 검색해보았다

이러한 페이지가 나왔다. 여기서 나온대로

다운을 받고 설정까지 끝냈다

---

여기부터는 typescript와 storybook에러이다. 개인적으로 아래 문제도 좋은 경험이라서 같이 포스팅 해보았다.

이제 되겠지하고 실행했지만, 위와 같은 에러가 나왔다.
이것은 내 생각에 storybook 아까문제와 다른 문제라고 생각했다. 아마도 내가 좀 더 쉽게 작업하기 위해서 typscript의 path alias를 설정한것이 sotrybook에 제대로 적용이 되지 않은 것 같다.
그래서 구글링을 하는 도중 tsconfig-paths-webpack-plugin 라는 것으로 해결이 되는 것을 확인했다.
그렇다면, storybook에 위의 plugin을 사용하는 예시가 있지 않을까해서 다시 공식문서를 뒤져보았다.

그리고 타입스크립트 전용버젼을 찾아내었고

제대로 실행되게 되었다

---

해결방법 요약

Scss storybook 설정법

typescript alias Storybook에 적용하는 법

npm install --save-dev tsconfig-paths-webpack-plugin