我如何配置 Storybook.js Webpack 以在 Next.js 项目的 CSS 模块中使用绝对图像路径？

Question

我正在尝试配置 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 repo 问题可以由运行 npm install 和 npm run storybook.

重现

Answer 1

基本上您已经配置了一个图像加载器，这意味着您可以在您的应用程序中加载图像。问题是 css-loader 不解析绝对路径 /images/cucumber.png （因为它只支持相对路径）。为了解决这个问题，您可以手动解决如下问题：

newConfig.resolve.alias['/images/cucumber.png'] = path.resolve(__dirname, '../public/images/cucumber.png');

return newConfig;

Answer 2

您可以 define a static folder 在您的运行脚本中使用 Storybook： "start-storybook": "start-storybook -s ./public -p 9001"

Answer 3

我用这个解决了类似的问题。

// storybook/main.js

module.exports = {
  staticDirs: ['../public']
};

Serving static files via Storybook Configuration

我如何配置 Storybook.js Webpack 以在 Next.js 项目的 CSS 模块中使用绝对图像路径？

How can I configure Storybook.js Webpack to work with absolute image paths in CSS modules in a Next.js project?

javascript

css

webpack

next.js

storybook