Skip to content

Asset referenced with CSS variables not found using application-builder #27445

@wmarques

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions