使用 Storybook 解决组件中的绝对/别名导入

Question

我正在使用gatsby-plugin-alias-imports能够像这样进行绝对导入：import { colors } from "@styles/theme";这是在gatsby-config. 现在我刚刚在我的项目中添加了故事书。由于 storybook 没有通过 gatsby 运行，别名导入将无法解析，我收到一个错误：

./src/components/Button/index.js 中的错误未找到模块：错误：无法解析“@styles/theme”...

这是有道理的。Storybook 不知道如何处理@styles...- 但我该如何解决这个问题？

Answer 1

您需要通过添加./src到分辨率数组来配置 Storybook 的 Webpack 以遵循相同的指令。在您的.storybook/webpack.config.js文件中，将此添加到要导出的函数的主体中（假设您正在config从第一个参数解构）：

config.resolve.modules = [
  path.resolve(__dirname, "..", "src"),
  "node_modules",
]

完成后，您的webpack.config.js文件应如下所示：

const path = require("path")

module.exports = ({ config }) => {
  // a bunch of other rules here

  config.resolve.modules = [
    path.resolve(__dirname, "..", "src"),
    "node_modules",
  ]

  // Alternately, for an alias:
  config.resolve.alias = {
    "@styles": path.resolve(__dirname, "..", "src", "styles")
  }

  return config
}

Answer 2

您需要告诉 Storybook 的 Webpack 配置来解析您在文件中设置的路径别名tsconfig.json。

在您的.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包添加到 Storybook Webpack 配置的解析插件中，并使用您的tsconfig.json解析路径别名。

这也是在任何 webpack 配置文件中完成的确切方式。我已经处理了很多使路径别名起作用的问题，这绝对是最简单的方法，并且每次都会起作用。