Asset referenced with CSS variables not found using application-builder

[wmarques]

Command

build, run

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

We are currently testing the new application builder on my client application.

We are referencing quite often a SASS stylesheets which sets a CSS Custom Property to load the an asset (a picture). This stylesheet also contains mixins that's why we use it in our components stylesheets using the use keyword.

This works fine using webpack but I can't manage to make it work with the esbuild builder.

It seems that the compiler transforms the path into an incorrect one, it should not change as I stated that assets is an externalDependency in the angular.json file.

You can check the repo for a minimal reproduction.

Let me know if I can help on this in any ways !

Minimal Reproduction

https://github.com/wmarques/sass-issue-repro

npm install && npm start

Exception or Error

✘ [ERROR] Could not resolve "../styles/assets/img.png" [plugin angular-css-resource]

    src/app/app.component.scss:3:18:
      3 │   --img-path: url("../styles/assets/img.png");
        ╵                   ~~~~~~~~~~~~~~~~~~~~~~~~~~

  Preprocessor stylesheets may not show the exact file location of the error.


✘ [ERROR] Could not resolve "./styles/assets/img.png" [plugin angular-css-resource]

    src/styles.scss:3:18:
      3 │   --img-path: url("./styles/assets/img.png");
        ╵                   ~~~~~~~~~~~~~~~~~~~~~~~~~

  Preprocessor stylesheets may not show the exact file location of the error.

Your Environment

Angular CLI: 17.3.3
Node: 18.20.1
Package Manager: npm 10.5.0
OS: linux x64

Angular: 17.3.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.3
@angular-devkit/build-angular   17.3.3
@angular-devkit/core            17.3.3
@angular-devkit/schematics      17.3.3
@schematics/angular             17.3.3
rxjs                            7.8.1
typescript                      5.4.4
zone.js                         0.14.4

Anything else relevant?

No response

[alan-agius4]

Duplicate of #27007

[wmarques]

Thanks for the quick feedback @alan-agius4.

Just to make sure, my issue is coming from a path configured in CSS variable and not a SCSS one as stated in #27007.
But I am indeed using SCSS files so maybe the bug has the same source.

[alan-agius4]

Upon checking this again, given that it's a CSS variable, the approach for referencing or processing the image depends on your preference. Should it be processed and fingerprinted by the build system, or simply referenced as the copied asset?

Considering that you're placing the image in the assets directory, I assume the latter. In that case, to resolve the issue, you need to adjust the value to start with a /. If it's the former approach, the location needs to be changed to ../ to align with the source location, and in which case it should be removed from the assets directory to avoid having the image copied twice.

[wmarques]

I confirm that we just want a reference to it and not hash it.

We are currently deploying the app under a /fr sub path, so I'm afraid that if I put a / at the beginning, the asset will be searched via mydomain.com/assets/image.png and not mydomain.com/fr/assets/image.png. I did not try to be honest but I think adding the / will lead to a 404 error, but I'll give it a try just to make sure :)

[alan-agius4]

Actually had a chat with @clydin and this seems to be a slightly different bug from #27007 as what is happening here is that the URL rebasing logic is not aware of the externals.

[wmarques]

Yes it seems so, because I thought that adding assets/* to externalDepdencies would solve the issue, I think that's what is expected :)

Don't hesitate to ping me if you need help on this, I tried to investigate but I struggled to find the source to be honest 😄 But if you have some hints or files I can try to investigate