scss 에서 global styles가 스토리북에 적용안되는 문제

Storybook에서 SCSS로 작성된 전역 스타일을 적용하려면, .storybook/preview.js 파일에서 해당 SCSS 파일을 import해야 합니다.

예를 들어, global.scss라는 전역 스타일 파일이 있다면, 다음과 같이 import할 수 있습니다:

import '../styles/global.scss';

 

이렇게 하면, Storybook에서 global.scss 파일의 스타일이 적용됩니다.

또한, SCSS 파일을 처리하려면 Storybook의 webpack 설정을 수정해야 합니다. .storybook/main.js 파일에서 webpackFinal 설정을 다음과 같이 추가하세요:

이제 Storybook에서 SCSS로 작성된 전역 스타일을 적용할 수 있습니다.

 

module.exports = {
  // ...
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\\.scss$/,
      use: ['sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

이렇게 하면, Storybook에서 SCSS 파일을 처리할 수 있습니다. style-loader, css-loader, sass-loader는 각각 스타일을 로드하고, CSS를 처리하고, SCSS를 CSS로 컴파일하는 역할을 합니다.

이러한 로더들은 개발 의존성으로 설치해야 합니다:

npm install --save-dev sass-loader

*** 내 프로젝트에서는 sass만 쓴다. sass-loader만 설치하고 적용하기!!

 

 

 

- 예시

.storybook > preview.ts

import type { Preview } from '@storybook/react';
import '../styles/global-styles/global.scss';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

.storybook > main.ts


import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path';

const config: StorybookConfig = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
  webpackFinal: async (config) => {
    if (!config.module || !config.module.rules) {
      return config;
    }

    config.module.rules = [
      ...config.module.rules.map((rule) => {
        if (!rule || rule === '...') {
          return rule;
        }

        if (rule.test && /svg/.test(String(rule.test))) {
          return { ...rule, exclude: /\\.svg$/i };
        }
        return rule;
      }),
      {
        test: /\\.svg$/,
        use: ['@svgr/webpack'],
      },
      >>>> 여기
      {
        test: /\\.scss$/,
        use: ['sass-loader'],
        include: path.resolve(__dirname, '../'),
      },
      >>>>>>>>
    ];

    return config;
  },
};

export default config;