Storybook path alias 설정

 

tsconfig의 path에 아래 별칭을 이용하여 사용중이었는데

"@": ["./packages/my-app"],
"@/*": ["./packages/my-app/src/*"],

 

storybook내부에서 아래 별칭을 사용하려면 main.ts에 alias설정을 해줘야 한다. 

https://storybook.js.org/docs/react/builders/webpack#troubleshooting

Webpack

(storybook은 webpack으로 빌드하도록 해놓았다 vite x)

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
import path from 'path';

const config = {
  ...(생략)
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': path.resolve(__dirname, '../src'),
    };
    return config;
  },
};
export default config;

위와 같은 형태로 하면 프로젝트 내에서  @/Icon 형태로 썼을 때 제대로 경로를 찾는다.

 

 

(참고용)

Resolve | 웹팩