사이드 프로젝트
storybook에서 scss @import 구문을 인식 하지 못하는 문제
jfmam
2023. 3. 23. 14:28
문제
스토리북 실행 시 실행이 안되는 이슈가 발생하였다. 찾아보니 scss에서 다른 scss 파일을 import 할 때 해당 부분을 인식 할 수 없다는 문제였다.
해결방법
https://github.com/storybookjs/presets/tree/master/packages/preset-scss
GitHub - storybookjs/presets: 🧩 Presets for Storybook
🧩 Presets for Storybook. Contribute to storybookjs/presets development by creating an account on GitHub.
github.com
위의 링크를 보고 따라 하면 된다.
- css-loader, sass-loader, style-loader, sass를 devdependencies에 설치
- storybook addon인 @storybook/preset-scss 를 설치 한 후 .storybook/main.js addons에 추가 한다
module.exports = {
addons: ['@storybook/preset-scss'],
};