[Storybook] SCSS Loader

문제 상황

• 컴포넌트에 scss 스타일을 불러오는 과정에서 애플리케이션은 문제없이 작동했으나 스토리북에서 아래와 같은 오류가 발생하였다.

Module parse failed: Unexpected character '@' (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
> @keyframes slideInRight {
|   from {
|     transform: translateX(100%);

해결 방법

• 스토리북은 프로젝트 웹팩 설정과 다른 환경을 가지고 있어, 스토리북에서 scss 를 사용하려면 추가적인 설정이 필요하다.
• 스토리북 웹팩 설정파일(.storybook/main.js 또는 .storybook/webpack.config.js)에 SCSS 파일을 위한 로더를 추가한다.

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';
import path from 'path';

const config: StorybookConfig = {
  ...
  webpackFinal: async (config, { configType }) => {
    // SCSS 파일을 위한 로더 설정 추가
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

export default config;

• 이제 스토리북에서 scss 파일을 사용할 수 있다.