我正在尝试将Storybook配置为与Next.js，Ant Design，Less和TypeScript一起使用。在Next.js中，图像必须存储在public/文件夹中，并带有绝对路径引用，以在整个项目中使用。我无法配置Storybook.js Webpack来解析这些绝对图像路径。
例如，在CSS模块中，我可以拥有：
.testImage {
background-image: url('/images/cucumber.png');
background-repeat: no-repeat;
background-size: contain;
height: 300px;
width: 300px;
}
但是如果出现以下错误，则Storybook将失败：
ERROR in ./common/layout/TestImage/TestImage.module.css (./node_modules/css-loader/dist/cjs.js??ref--15-1!./common/layout/TestImage/TestImage.module.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/images/cucumber.png' in '/Users/gerritvanderlugt/Development/misc/storybook-issue/common/layout/TestImage'
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:209:21
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
@ ./common/layout/TestImage/TestImage.module.css 2:12-115 9:17-24 13:7-14 45:20-27 47:4-60:5 49:6-59:7 50:38-45 56:26-33 58:21-28 68:15-22
@ ./common/layout/TestImage/TestImage.tsx
@ ./common/layout/TestImage/index.tsx
@ ./common/layout/TestImage/TestImage.stories.tsx
@ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
我试着用一些不同的东西file-loader，url-loader而css-loader却无法得到它的工作。任何帮助将不胜感激！
这是一个GitHub存储库，可以通过运行npm install和复制该问题npm run storybook。
基本上，您已经配置了图像加载器，这意味着您可以在应用程序中加载图像。问题是css-loader不能解决绝对路径/images/cucumber.png（因为它仅支持相对路径）。为了解决此问题，您可以手动解决以下问题：
newConfig.resolve.alias['/images/cucumber.png'] = path.resolve(__dirname, '../public/images/cucumber.png');
return newConfig;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句