Unable to reference asset.input directory from Scss without relative path

[david-kirkland]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

We should be able to reference static files from architect.build.options.assets.input in SCSS without relative paths.

Default config...

// angular.json

  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ]

Static files in the public directory can be referenced anywhere in the app without a relative path. For example, this does render without issue...

// app.component.html

<img src="background.jpg" />

Errors are thrown when the same static files are referenced from SCSS...

// styles.scss

html {
  background-image: url("background.jpg");
}

Please provide a link to a minimal reproduction of the bug

https://github.com/david-kirkland/ng-bug-public-scss/

Please provide the exception or error you saw

X [ERROR] Could not resolve "background.jpg" [plugin angular-css-resource]

    src/styles.scss:3:24:
      3 │   background-image: url("background.jpg");
        ╵                         ~~~~~~~~~~~~~~~~

  You can mark the path "background.jpg" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
  Preprocessor stylesheets may not show the exact file location of the error.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.1.0
Node: 22.4.1
Package Manager: npm 10.8.1
OS: Windows 10 Enterprise

Anything else?

No response

[alan-agius4]

This is working as intended. In CSS, the path of the resource should be relative to the containing file at build time (i.e., the source code on disk). The build system will process this, automatically including it in the output and adjusting the reference in the built code to match the application's output structure. Files referenced should not be placed in the public folder, as this would result in duplicate copies in the application's output.

If you don't want to opt-out of this behavior, you can use root-relative URLs, which are relative to the host, not the current path. For additional information, please see: https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references#root_relative or mark the path as external via the externalDependencies option.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}