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

[lmiller1990]

Ahh I did it!

Several hacks, let me write it down before I forget.

1. I removed the file system check here: https://github.com/bholloway/resolve-url-loader/blob/v5/packages/resolve-url-loader/index.js#L129. Now we can progress.
2. In node_modules/@angular-devkit/build-angular/src/webpack/configs/styles.js, I used the root option in the styleLanguages array under 'scss' and set it to /__cypress/src (which is devServerPublicPathRoute inside Cypress.
3. Confusing I still see errors in the console. Ignoring those, I visited the test, and the images are loaded.

Here’s a screenshot showing the file. Line 245 is the trick.

Obviously hacking into resolve-url-loader is not really an option, but this isolated this issue: Angular’s config, specifically the resolve-url-loader, does not know about the Cypress dev server url. If we can fix this somehow, it will work.

What we could do is set sourceRoot, which is just ${projectRoot}/${src}. So <CWD> + / + <SRC_ROOT>.

[warrensplayer]

What is working for me is to use relative paths for the images in the SCSS files.

So app.component.scss looks like:

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

And _icon.scss looks like:

$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;
  }

  @debug $images;

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

See if those changes work for you as well.