title: How can I configure Storybook.js Webpack to work with absolute image paths in CSS modules in a Next.js project?
body: <p>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 <code>public/</code> 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.</p>
  <p>For example, in a CSS module I could have:</p>
  <pre class="lang-css prettyprint-override"><code>.testImage {
    background-image: url('/images/cucumber.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 300px;
    width: 300px;
  }
  </code></pre>
  <p>But Storybook will fail when building with this error:</p>
  <pre><code>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), &lt;anonymous&gt;: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), &lt;anonymous&gt;: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), &lt;anonymous&gt;: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), &lt;anonymous&gt;: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), &lt;anonymous&gt;: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), &lt;anonymous&gt;: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&amp;quiet=false&amp;noInfo=undefined
  </code></pre>
  <p>I tried a few different things with <code>file-loader</code>, <code>url-loader</code> and <code>css-loader</code> but was unable to get it working. Any help would be greatly appreciated!</p>
  <p>Here is a <a href="https://github.com/GVanderLugt/storybook-next-antd-less-typescript-config" rel="noreferrer">GitHub repo</a> where the issue can be reproduce by running <code>npm install</code> and <code>npm run storybook</code>.</p>