Storybook 에서 scss 세팅 및 variables 가져오는 방법 (with nextjs)

스토리북을 사용하며 디자인토큰 변수를 사용해주려고 하니 인식하지 못하고 오류가 났다.
세팅을 해보자!

dependencies

Sass 지원 추가를 위한 개발 종속성 추가

yarn add sass sass-loader css-loader style-loader
yarn add resolve-url-loader --save-dev

preview.ts

공통으로 무언가 적용해야되는 것은 preview.ts 에 import 해야 한다.

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

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

export default preview;

variables 불러오기

main.ts

variables를 불러오려면 @storybook/addon-styling을 설치해야 한다.

yarn add -D @storybook/addon-styling

그리고 addons 에서 "@storybook/addon-styling" options > sass에 아래와같이 prependData를 작성해야한다.

  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    {
      name: "@storybook/addon-styling",
      options: {
        sass: {          
          implementation: require("sass"),
          prependData: `@import "@/styles/common/_variables.scss";`
        }
    }
  }
  ],

그런데 @storybook/addon-styling 문서를 보니 더이상 지원하지 않는다고 한다.

두 개의 별도 애드온 @storybook/addon-styling-webpack과 
@storybook/addon-themes 으로 나뉘어졌다고 해서 나는
@storybook/addon-styling-webpack으로 바꿔주면 될 것 같다.

마이그레이션 방법 공식문서

공식문서를 보면 아래와 같이 설정하라고 나와있다.

    {
        name: '@storybook/addon-styling-webpack',
        options: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: require.resolve('sass'),
                                sassOptions: {
                                    includePaths: ['node_modules'],
                                },
                            },
                        },
                    ],
                },
            ],
        },
    }

수정 후 yarn storybook 해주면

이런 에러가 뜬다.
본인의 세팅에 맞게 수정을 해줘야 .. 하니까 당연히 오류가 난다
아래와 같이 수정후 실행하면 정상적으로 동작한다!!!!!!

{
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: {
                  implementation: require('sass'),
                  additionalData: `@import "src/styles/common/_variables.scss";`, //이 코드를 입력해야 variables 인식
                  sassOptions: {
                    includePaths: [path.resolve(__dirname, '../node_modules')],
                  },
                },
              },
            ],
          },
        ],
      },
    },

에러 발생

1. stringWidth 에러

const stringWidth = require('string-width'); 에러 발생

이 에러는 종종 Webpack이나 Babel과 같은 모듈 번들러가 특정 패키지를 로드하는 과정에서 발생할 수 있다고 한다. 특히, 여러 버전의 패키지 충돌이나, 호환되지 않는 버전의 패키지를 사용하는 경우에 발생하는 것 같다.

"resolutions": {
    "jackspeak": "2.1.1" //웹팩 에러 방지 (버전 관련 에러남)
  }

해결 방법:
resolutions 필드를 사용하여 특정 패키지 버전 고정

package.json 파일의 resolutions 필드를 사용하여 특정 패키지 버전을 고정할 수 있다. resolutions 필드는 Yarn 패키지 매니저에서 제공하는 기능으로, 종속성 트리 내의 특정 패키지 버전을 강제할 수 있고 이걸로 의존성 간의 버전 충돌을 해결할 수 있다.

참고: https://github.com/storybookjs/storybook/issues/22431

버전 확인

같은 방법으로 했는데 안된다면 버전 확인하세용..

"resolve-url-loader": "^5.0.0",
"@storybook/addon-styling-webpack": "^1.0.0",
"sass": "^1.77.2",
"sass-loader": "10.1.1",
"style-loader": "2.0.0",
"ts-loader": "9.5.1",
"tsconfig-paths-webpack-plugin": "^4.1.0"
"css-loader": "5.2.6",
"resolutions": {
    "jackspeak": "2.1.1" //웹팩 에러 방지 (버전 관련 에러남)
  }

"storybook": "^8.0.8",
"@chromatic-com/storybook": "^1",
"@storybook/addon-essentials": "^8.0.8",
"@storybook/addon-interactions": "^8.0.8",
"@storybook/addon-links": "^8.0.8",
"@storybook/addon-onboarding": "^8.0.8",
"@storybook/blocks": "^8.0.8",
"@storybook/nextjs": "^8.0.8",
"@storybook/react": "^8.0.8",
"@storybook/test": "^8.0.8",

main.ts 전체 코드

const path = require('path');

module.exports = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public'],

  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: {
                  implementation: require('sass'),
                  additionalData: `@import "src/styles/common/_variables.scss";`,
                  sassOptions: {
                    includePaths: [path.resolve(__dirname, '../node_modules')],
                  },
                },
              },
            ],
          },
        ],
      },
    },
  ],

  framework: {
    name: '@storybook/nextjs',
    options: {
      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
    },
  },

  webpackFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': path.resolve(__dirname, '../src/'),
    };
    config.resolve.roots = [
      path.resolve(__dirname, '../public'),
      path.resolve(__dirname, '../node_modules'),
    ];
    config.module.rules.push(
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              onlyCompileBundledFiles: true,
            },
          },
        ],
        exclude: path.resolve(__dirname, 'node_modules'),
      },
    );
    return config;
  },

  docs: {
    autodocs: 'tag',
  },
};

참고
관련 깃헙 이슈1
관련 깃헙 이슈2
NextJS와 Storybook 그리고 scss