React Storybook scss import error

리액트 개발 환경에서 스토리북 사용시 scss 파일을 불러올때 아래처럼 `Module parse` 에러가 날때가 있다. scss 로더 관련 애드온 설치가 필요하며 `.stroybook`폴더의 main.js 파일에서 export 설정이 필요하다.

에러코드

ERROR in ./src/components/ThreeText/index.scss 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

scss 애드온 설치하기

yarn add --dev @storybook/preset-scss css-loader@5.2.7 sass sass-loader@10.1.1 style-loader@2.0.0

main.js 파일 수정

// .storybook/main.js

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

main.js export 까지 끝나면 정상적으로 스타일이 렌더링 되는 것을 확인할 수 있다.