Javascript/Typescript

[Typescript] storybook에서 절대 경로 설정하기

bugtype 2021. 3. 24. 22:07

1. 먼저 tsconfig에 path 셋팅을 한다.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
    }
  }
}

2. storybook 셋팅에서 TsconfigPathsPlugin를 추가해준다.

// .storybook/main.js
const TsconfigPathsPlugin  = require('tsconfig-paths-webpack-plugin')
module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
};

tsconfig-paths-webpack-plugin 는 설치해줘야 한다.!

yarn add -D tsconfig-paths-webpack-plugin
//
npm install -D tsconfig-paths-webpack-plugin