Error with assets loading from scss in Angular

Current behavior

Loading assets from scss with something like this :

<div class="testClass"></div>

.testClass {
  background-image: url("/assets/test.png");
  background-size: contain;
  width: 100px;
  height: 100px;
}

Image is showing using ng serve but not when using cypress component testing

If I remove the ‘/’ in the url, image load in component testing but angular won’t compile with the following error :

./src/app/app.component.scss?ngResource - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
[...]/theTester/src/app/app.component.scss:2:2: Can't resolve './assets/test.png' in '[...]/theTester/src/app'

Another loading problem comes from loading assets in scss “main” files, I have a main.scss containing :

@import "components/icon";

For simplicity purposes I didn’t use abstracts variables and mixins.

components/icons :

$imagesTest: test "/assets/test.png", testSecond "/assets/test.png";

.icon {
  top: 0px;
  position: relative;

  &.yolo {
    background-image: url("/assets/test.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  @each $class, $url in $imagesTest {
    &.#{$class} {
      background-image: url($url);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}

app.component.html:

  ICON TEST:
  <div
    class="icon test"
    style="display: block; width: 50px; height: 50px"
  ></div>
  YOLO:
  <div
    class="icon yolo"
    style="display: block; width: 50px; height: 50px"
  ></div>

If I remove the / here, images won’t load from assets since it’s using relative path and it will try to load assets/components/test.png and ng serve won’t compile with the same error above.

Desired behavior

I would like to be able to load all my assets, I’ve given a sample app reproducing the issue below, but in my real-world app, I can’t load any of my svg that comes from scss and all the fonts I use aren’t loaded since I’m using @font-face with urls in scss and they can’t be resolved.

Test code to reproduce

Repo with code: https://github.com/theoarmengou/angular-cypress-bug-assets

When doing ng serve, you should see 4 images on localhost:4200 and when going to localhost:4200/dev, there should be 8 images.

When using yarn cypress:open in component testing, not all images are showing for app.component and dev.component.

Cypress Version

10.10.0

Node version

16.16.0

Operating System

macOS 12.5.1

Debug Logs

No response

Other

No response