Storybook使用tsconfig中的别名配置

lipo8081

于 2023-01-04 17:07:24 发布

阅读量535

点赞数

分类专栏：个人探究文章标签：前端 javascript webpack

本文链接：https://blog.csdn.net/m0_37964621/article/details/128551086

版权

个人探究专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何解决在Storybook中别名配置失效的问题。通过添加特定插件并进行配置，使得tsconfig中的别名能在Storybook框架下正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

配置在tsconfig.json中的别名系统在storybook框架下无法生效

解决方法

添加插件tsconfig-paths-webpack-plugin到storybook的运行时框架中。

实施

安装插件

npm install -D tsconfig-paths-webpack-plugin

配置插件

配置路径.storybook/main.js.

const TsconfigPathsWebpackPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  ...
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...config.resolve.plugins,
      new TsconfigPathsWebpackPlugin()
    ];
    return config;
  }
  ...
}