我用的是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()的值?
1条答案
按热度按时间taor4pac1#
我遇到了同样的问题:我的图像在
/public
目录中,在我的项目的根目录下。我可以让我的应用程序图像工作,也可以让故事书图像工作。应用程序导入是url('/example.png')
,故事书导入是url('/public/example.png')
。为了创建一个适用于两个应用程序的导入,我在URL路径中使用了
~
符号,它引用了项目根。所以我的工作导入是url('~public/example.png')
。另外,不要忘记在storybook配置中引用
staticDirs
。在我的例子中,它是staticDirs: ["../public"]
。