[React+Typescript] Storybook에 sass 설정하기(sass 에러 나는 경우)

storybook에서 sass 파일을 불러올 때 에러가 나는 경우

추가적인 설정을 해주어야 합니다!

 

1. 라이브러리 설치 (storybook/addon-styling, sass)

@storybook/addon-styling 와 sass를 설치합니다.

# yarn
yarn add -D @storybook/addon-styling sass

# npm
npm install -D @storybook/addon-styling sass

 

 

2. main.ts addons에 sass 추가하기

.storybook > main.ts

addons에 sass를 추가해주면 됩니다.

// main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    /* 해당 부분 추가 - sass 관련 설정 */
    {
      name: '@storybook/addon-styling',
      options: {
        sass: {
          // Require your Sass preprocessor here
          implementation: require('sass'),
        },
      },
    },
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

 

 

➕ Global SASS 추가하기

.storybook > preview.tsx

preview에 scss 파일을 import 해주면 전역으로 해당 스타일이 적용됩니다!

// preview.tsx
import React from "react";
import type { Preview } from "@storybook/react";
import 'reflect-metadata';
// global style
import '../src/style/init.scss';
import '../src/style/font.scss';
import '../src/style/animation.scss';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    }
  }
};

export default preview;

 

 

SASS 적용 성공! 🙌