Storybook: Cannot render the background image in CSS correctly

Current Behavior

When using image file in module.scss, the background image cannot be displayed correctly in the storybook,

and the image file actually generated are damaged.

Expected Behavior

Can use the background image in module.css and show it.

Steps to Reproduce

Create a project

# 1.  create project
npx create-nx-workspace project-name --preset=next --style=scss --appName=app-name

# 2. generate libray, named `uikit`
nx generate @nrwl/react:library --name=uikit --style=scss --linter=eslint --unitTestRunner=jest --pascalCaseFiles --publishable --buildable --component --strict --no-interactive

# 3. add storybook to project
yarn add --dev @nrwl/storybook
nx g @nrwl/react:storybook-configuration uikit

Add some code and file

1. add a image file into libs/uikit/src/lib folder, like libs/uikit/src/lib/demo.png

2. modify libs/uikit/src/lib/Uikit.module.scss file, like:

.background {
  background: url('demo.png'); // add image to here
  background-size: 100%;
  width: 100px;
  height: 100px;
}

1. modify libs/uikit/src/lib/Uikit.tsx file, like:

import s from  './Uikit.module.scss'; // modified
import { FC } from 'react';

export interface UikitProps {
  name: string;
}

export const Uikit: FC<UikitProps> = ({ name }) => {
  return (
    <div className={s.background}> // modified
      <h1>Welcome to Uikit! {name}</h1>
    </div>
  );
};

export default Uikit;

And finally execute the command to launch the StoryBook service

nx run uikit:storybook

Failure Logs

None

Environment

• Node.js: 14.18.2
• @nrwl/cli: 13.1.2
• @nrwl/storybook: 13.4.1
• @storybook/builder-webpack5: 6.3.12

[kaspar-naaber]

It also appears to be happening in both - the Storybook and the react app as well.

It links to a SVG that is not rendering correctly: Storybook:

React app (Next.JS)

[kaspar-naaber]

Still happens to me with the latest version of NX also. Are you sure that the SVG usage is also fixed? Because as far as I know you fixed using the PNG-s.