如何配置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?

问题描述

我正在尝试将Storybook配置为与Next.js，Ant Design，Less和TypeScript一起使用.在Next.js中，图像必须存储在 public/文件夹中，并用绝对路径引用，以在整个项目中使用.我无法配置Storybook.js Webpack来解析这些绝对图像路径.

例如，在CSS模块中，我可以拥有:

  .testImage {背景图片:url('/images/cucumber.png');背景重复:不重复；背景大小:包含；高度:300像素；宽度:300像素；} 

但是如果出现此错误，Storybook将会失败:

./common/layout/TestImage/TestImage.module.css(./node_modules/css-loader/dist/cjs.js??ref--15-1!./common/layout/TestImage/TestImage.module.css)模块构建失败(来自./node_modules/css-loader/dist/cjs.js):错误:无法解析"/Users/gerritvanderlugt/Development/misc/storybook-issue/common/layout/TestImage"中的"/images/cucumber.png"在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:209:21在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5在评估时(在创建时评估(/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10)，< anonymous>:15:1)在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7中在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5在评估时(在创建时评估(/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10)，< anonymous>:15:1)在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5在评估时(在创建时评估(/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10)，< anonymous>:27:1)在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43中在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5在评估时(在创建时评估(/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10)，< anonymous>:16:1)在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5在评估时(在创建时评估(/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10)，< anonymous>:16:1)在/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5在评估时(在创建时评估(/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10)，< anonymous>:16:1)在/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/generate-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-generation-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generation-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generation-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generation-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generation-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');返回newConfig; 

I am trying to configure Storybook to work with Next.js, Ant Design, Less, and TypeScript. In Next.js, images have to be stored in the public/ folder and referenced with absolute paths to be used throughout the project. I am having trouble configuring the Storybook.js webpack to be able to resolve these absolute image paths.

For example, in a CSS module I could have:

.testImage {
  background-image: url('/images/cucumber.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 300px;
  width: 300px;
}

But Storybook will fail when building with this error:

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

I tried a few different things with file-loader, url-loader and css-loader but was unable to get it working. Any help would be greatly appreciated!

Here is a GitHub repo where the issue can be reproduce by running npm install and npm run storybook.

解决方案

Basically you already have had an image loader configured which means you're able to load image in your app. The issue is css-loader doesn't resolve absolute path /images/cucumber.png (since it just supports relative path). In order to fix this, you can manually resolve as following:

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

return newConfig;

这篇关于如何配置Storybook.js Webpack以在Next.js项目中的CSS模块中使用绝对图像路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！