Storybook 在通过 css url() nextjs 13、tailwindcss 加载的图像中找不到模块“example.png”

Question

我正在使用 nextjs 13，tailwindcss。尝试为该项目运行故事书会抛出：

ModuleNotFoundError: Module not found: Error: Can't resolve '/images/example.png' in 'C:\repos\mvp\src\styles'

原因是使用bg-[url('/images/example.png')]

.storybook/main.ts

ModuleNotFoundError: Module not found: Error: Can't resolve '/images/example.png' in 'C:\repos\mvp\src\styles'

终端显示“从 ./.\public\images at /images 提供静态文件” 有没有办法通过 Storybook 配置来解决此问题而不更改 css url() 的值？

Answer 1

我遇到了同样的问题：我的图像位于/public项目根目录的目录中。我可以让我的应用程序图像正常工作，也可以使故事书图像正常工作。应用程序导入为url('/example.png')，故事书导入为url('/public/example.png')。

为了进行适用于这两个应用程序的导入，我~在 URL 路径中使用了该符号，该符号引用了项目根目录。所以我的工作导入是url('~public/example.png').

另外，不要忘记引用staticDirs故事书配置中的 。就我而言，是staticDirs: ["../public"]。