storybook에서 scss @import 구문을 인식 하지 못하는 문제

문제

스토리북 실행 시 실행이 안되는 이슈가 발생하였다. 찾아보니 scss에서 다른 scss 파일을 import 할 때 해당 부분을 인식 할 수 없다는 문제였다.

해결방법

https://github.com/storybookjs/presets/tree/master/packages/preset-scss

GitHub - storybookjs/presets: 🧩 Presets for Storybook

위의 링크를 보고 따라 하면 된다.

1. css-loader, sass-loader, style-loader, sass를 devdependencies에 설치
2. storybook addon인 @storybook/preset-scss 를 설치 한 후 .storybook/main.js addons에 추가 한다

module.exports = {
  addons: ['@storybook/preset-scss'],
};