typescript - 如何将路径别名添加到 Storybook 的 webpack 配置中？

我正在使用 Storybook 与 nextjs 和 webpack。以下是我的 .storybook/main.ts:

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  ...
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  ...
};

export default config;

这个组合会自动从此工作区的 tsconfig.json 中获取 TypeScript 设置——这非常好。我正在尝试仅为 Storybook 添加一些 TypeScript 路径别名。我根据几个 SO 的答案尝试了以下方法，但它不起作用——每当遇到像 @/components 这样的路径导入时，Storybook 就会报错。

const config: StorybookConfig = {
  ...
  webpackFinal: (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@/*': [
          './src/*',
          '../../packages/ui-lib/src/*',
        ],
      };
    }

    return config;
  },
};

如果我在 tsconfig.json 中放入相同的别名，Storybook 就能正常工作。然而我不想这样做，因为这个工作区的 tsconfig 不应该了解 ui-lib 文件夹中的源代码。

有人知道为什么这不起作用吗？

附注：我也尝试过像这样指定路径：path.resolve(__dirname, "../../packages/ui-lib/src") ——这也不起作用。

答案＃1

你曾经尝试过 tsconfig-paths-webpack-plugin 吗？

我遇到了类似的问题，并且是这样解决的：

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

//main.ts
import type { StorybookConfig } from "@storybook/react-webpack5";

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

const config: StorybookConfig = {
 //...
   webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions,
        }),
      ]
    }
    return config;
  },
}