react + storybook + scss 세팅하기 (scss 오류해결)

리액트 환경에 스토리북을 설치하고 익숙한 scss로 작업하려고 공식문서(storybook+sass)에 나온대로 설정했으나 아래와 같은 오류가 촤르르륵 나오는것이다.

SassError: expected "{".
  ╷
2 │       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                  ^
  ╵

간단하게 해결될 줄 알았는데 하루종일 삽질하고 구글링하고 config 설정하고 이거저거 설치했다 지웠다 난리도 아니었다.
그렇게 겨우겨우 어이없고 간단하게 해결되어 글을 작성해본다.

개발 환경

• react
• typescript
• webpack5

목적

스토리북에서 global scss로 변수나 mixin을 활용하여 스타일링하고자 함

방법

• storybook을 최신버전으로 업그레이드한다.
  업그레이드하면서 @storybook/addon-mdx-gfm addon이 추가되었다.

 npx storybook@latest upgrade

• 기존에 addon @storybook/preset-scss 이 있다면 삭제해준다.

당황스럽다 이게 전부다...
스토리북 config 파일인 preview.ts 파일에 scss 파일을 추가해주니 잘 끌어온다.

// .storybook/preview.ts

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

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

export default preview;

구글링 했을때 대부분의 설정이 너무 복잡했고 main.js파일에 webpackFinal 설정하는 방법만 나왔는데 해결되지 않았고 이 방법으로 간단하게 해결하였다.

설치된 패키지 및 버전

{
  // package.json
  
  ...
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "cra-template-typescript": "1.2.0",
    "react": "^18.2.0",
    "react-docgen-typescript-loader": "^3.7.2",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sass": "^1.63.4",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  ...
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.22",
    "@storybook/addon-interactions": "^7.0.22",
    "@storybook/addon-links": "^7.0.22",
    "@storybook/addon-mdx-gfm": "^7.0.22",
    "@storybook/blocks": "^7.0.22",
    "@storybook/preset-create-react-app": "^7.0.22",
    "@storybook/react": "^7.0.22",
    "@storybook/react-webpack5": "^7.0.22",
    "@storybook/testing-library": "^0.1.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint-plugin-storybook": "^0.6.12",
    "prop-types": "^15.8.1",
    "storybook": "^7.0.22", // 기존 7.0.21 -> 7.0.22 로 업그레이드
    "webpack": "^5.87.0"
  }
}

참고

• https://github.com/storybookjs/storybook/issues/17768
• https://oss.issuehunt.io/r/storybookjs/storybook/issues/12464
• https://uxicode.tistory.com/entry/storybook-%EC%84%A4%EC%A0%95-SassError-SassError-expected