Description
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