Unable to resolve relative path in url in SCSS files after Angular 18 upgrade

[NavneetVaid]

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

Don't known / other

Is this a regression?

Yes

Description

Hi, I am trying to upgrade from angular 17 to angular 18. When i am trying to build i am getting errors of preprocessor where it is not able to resolve some relative paths.
So if you see it is not able to resolve the path inside url. Has something changed the way we need to import or add some configuration.

If i try to change the path from ../../images/profile-bg.png to /images/profile-bg.png it works fine. As this scss file is copied from a library present inside node_modules and pasted directly into our app, we cannot modify the path in scss.

I already have node_modules as a value in my stylePreprocessorOptions in angular.json

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

✘ [ERROR] Could not resolve "../../images/profile-bg.png" [plugin angular-css-resource]

<stdin>:10120:20:
  10120 │ ...background: url("../../images/profile-bg.png") top left no-r...
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

Angular CLI: 18.2.8
Node: 22.6.0
Package Manager: yarn 1.22.19
OS: darwin arm64

Angular: 18.2.7
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, upgrade

Package Version

@angular-devkit/architect 0.1802.7
@angular-devkit/build-angular 18.2.7
@angular-devkit/build-ng-packagr 0.1002.0
@angular-devkit/build-optimizer 0.1302.1
@angular-devkit/build-webpack 0.1802.7
@angular-devkit/core 18.2.7
@angular-devkit/schematics 18.2.7
@angular/cli 18.2.8
@schematics/angular 18.2.7
ng-packagr 18.2.1
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.3

Anything else?

No response

[alan-agius4]

Without a reproduction, it's difficult to determine the cause of the issue. However, if the SCSS file is copied from the library to your application, it's expected that the resource references may break.

Most libraries that offer SCSS and assets typically provide a method to configure the paths.

For example:

$images-path: '@example/styles/assets/images';
@import '@example/styles/scss/main';

[NavneetVaid]

Hi @alan-agius4 so basically its not third party library but one of the other projects of our org only we use it as a dependency and we are not just copying the scss files we are actually copying there whole folder which holds assets and scss files. So essentially you can assume it is like a folder created with Symbolic link and the same folder is present in node_modules. The thing is it all worked before upgrade and as i gave the example above it breaks when the path is relative and it works when i take out ../../ out of the path. I can understand that it is difficult to help without reproduction but can you help me with what areas i can look into it to understand the config changes. Like the package responsible for scss path resolving and all. We are using @angular-devkit/build-angular:browser as an executor

[alan-agius4]

The error suggests you’re not utilizing @angular-devkit/build-angular:browser. Instead, you may be using either @angular-devkit/build-angular:browser-esbuild or @angular-devkit/build-angular:application.

The plugin responsible for resolving CSS resources can be found here: https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/tools/esbuild/stylesheets/css-resource-plugin.ts#L32

Keep in mind that the esbuild pipeline resolution of CSS resources is relative to the file that contains them.

[NavneetVaid]

Where i can find this file in node_modules ?

(Keep in mind that the esbuild pipeline resolution of CSS resources is relative to the file that contains them) Can you please elaborate ?

What configurations can help in changing the behavior of css resolution ?

PS - This error is only with url everything else is getting resolved. Only styles having url is not getting resolved

[alan-agius4]

Where i can find this file in node_modules ?

node_modules/@angular/build/src/tools/esbuild/stylesheets/css-resource-plugin.js

(Keep in mind that the esbuild pipeline resolution of CSS resources is relative to the file that contains them) Can you please elaborate

URLs defined in SCSS files are resolved relative to the location of the SCSS file. For example, consider the following project structure:

src/
  ├── styles/
  │   ├── main.scss
  │   └── images/
  │       └── logo.png

In main.scss, if you write:

.header {
    background-image: url('./images/logo.png');
}

The logo.png will resolve to src/styles/images/logo.png when compiled.

What configurations can help in changing the behavior of css resolution ?

There are no configurations available to alter this behavior. However, you can prefix the URL with a /, which will instruct the build system to treat the file as an asset that should be copied using the assets option, instead of being copied and fingerprinted by the build system.

[NavneetVaid]

I dont have anything like the path you mentioned in my node_modules

If the way it resolves then it should be able to

This is the structure and

This is how the scss file refers the url. So ideally it should convert to src/resources/fonts and this is present

[alan-agius4]

You can use npm ls @angular/build to find the package.

[NavneetVaid]

I think you missed my second question

So my structure is

src -> resources -> core-saas-theme -> fonts.scss
src -> resources -> fonts -> font files (which is being referenced)

1.) url('../fonts/roboto-v20-latin-ext_latin-regular.woff2') ----> this doesn't work ( compile time issue )
2.) url('/fonts/roboto-v20-latin-ext_latin-regular.woff2') ----> this work ( compile time )

If the way the scss is resolved ideally the 1st one would have resolved src/resources/fonts/... and should have worked.

[alan-agius4]

The first one should work, but again without an exact minimal reproduction it's hard to tell what it happening.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[NavneetVaid]

Okay i will try if i can replicate, one question more. This is Nx monorepo, and the folder core-saas-theme is a symbolic-link folder.

[NavneetVaid]

Hi @alan-agius4 , I just the saw that this issues exist since long and few people got it for previous versions. I was wondering there might be something which is solely responsible for this and i saw that there is some resolve-url-loader available for this but as we are using angular-devkit can you help us know if we can pass this resolve-url-loader somewhere ? Configure our builder ? We are using NX mono repo

https://github.com/bholloway/resolve-url-loader/blob/v5/packages/resolve-url-loader/README.md

One more thing the issue is not coming from the file you mentioned, i tried putting in the console.log in css-plugin-resource file it does not show that. it comes from below path

at failureErrorWithLog (/Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:1476:15)
at /Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:945:25
at runOnEndCallbacks (/Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:1316:45)
at buildResponseToResult (/Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:943:7)
at /Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:970:16
at responseCallbacks.<computed> (/Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:622:9)
at handleIncomingPacket (/Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:677:12)
at Socket.readFromStdout (/Users/nvaid/work-directory/main/bpo-ui/node_modules/ng-packagr/node_modules/esbuild/lib/main.js:600:7)
at Socket.emit (node:events:520:28)
at addChunk (node:internal/streams/readable:559:12)

I just wanted to know what path it is creating when trying to resolve the path i am giving

[alan-agius4]

Based on the stack trace, it appears the issue is occurring during a library build.

resolve-url-loader can't be added in my-packagr.

This appears to be the same root cause of ng-packagr/ng-packagr#2918