scss variables cannot be used in a url() #28820
Description
Command
build
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
In certain cases you cannot use scss variables inside of a url().
The code background-image: url(my-variable.$hello) should result in background-image: url("world").
Run ng build in the linked repo to see what I mean.
The output is:
Application bundle generation failed. [0.883 seconds]
✘ [ERROR] Could not resolve "my-variable.$hello" [plugin angular-css-resource]
src/styles.scss:2:24:
2 │ background-image: url("more-scss||file:my-variable.$hello");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "my-variable.$hello" 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.
Minimal Reproduction
https://github.com/HazzMan2409/test-sass-vars-in-url
Exception or Error
No response
Your Environment
Angular CLI: 18.2.11
Node: 20.11.0
Package Manager: npm 10.2.4
OS: darwin arm64
Angular: 18.2.11
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1802.11
@angular-devkit/build-angular 18.2.11
@angular-devkit/core 18.2.11
@angular-devkit/schematics 18.2.11
@schematics/angular 18.2.11
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10
Anything else relevant?
No response