storybook cannot find module“example.png”in images loaded through css url()nextjs 13,tailwindcss

ca1c2owp  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(215)

我用的是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

import type { StorybookConfig } from "@storybook/nextjs";
import path from 'path';
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    'storybook-addon-next',
    {
      name: '@storybook/addon-styling',
      options: {
        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
        // For more details on this addon's options.
        postCss: true,
      },
    }
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal:async(config, options)=> {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@/components": path.resolve(__dirname, "../src/components"),
      "@/assets":path.resolve(__dirname, "../src/assets")
    };
    return config
  },
  staticDirs:[{from:"../public/images",to:"/images"}]
};
export default config;

终端显示“Serving static files from ./.\public\images at /images”,有没有办法通过storybook config解决这个问题,而不改变css url()的值?

taor4pac

taor4pac1#

我遇到了同样的问题:我的图像在/public目录中,在我的项目的根目录下。我可以让我的应用程序图像工作,也可以让故事书图像工作。应用程序导入是url('/example.png'),故事书导入是url('/public/example.png')
为了创建一个适用于两个应用程序的导入,我在URL路径中使用了~符号,它引用了项目根。所以我的工作导入是url('~public/example.png')
另外,不要忘记在storybook配置中引用staticDirs。在我的例子中,它是staticDirs: ["../public"]

相关问题