`Third party library using an exported scss variable from another third party library` is throwing issue while using application builder

[iKrishnaSahu]

Command

serve

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

Third party library using a exported scss variable from another third party library is throwing issue while using application builder

I am facing this issue in my private library. I am sharing same issue with some different third party package.

This issue will not reproduce if we use the old browser builder - @angular-devkit/build-angular:browser.
This issue is occurring in application builder - @angular-devkit/build-angular:application

Minimal Reproduction

1. Create new ng application - npx @angular/cli@latest new
2. Add ng material - ng add @angular/material
3. Add another UI lib - npm i --save ag-grid-community ag-grid-angular
4. Create a test.scss inside ./node_modules/@angular/material with below content

$test-logo: 'https://www.npmjs.com/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci80YWI1YjNjOTg2MmZjOTFlNTFlMmU2ZjY5YTY2ZTk5Mz9zaXplPTEwMCZkZWZhdWx0PXJldHJvIn0.UtT5fUih8Q7JxRFrDLEnxn8KXUZiUNzXX6gW3Y105F4';

5. export it from index.scss (./node_modules/@angular/material/index.scss)

...
@forward './test.scss' show $test-logo;

6. Import a scss file from ag-grid inside application's scss file (style.scss)

@use "ag-grid-community/styles/shared";
...

7. Now go inside ./node_modules/ag-grid-community/styles/_shared.scss and add below code

@use '@angular/material' as material;

.my-class {
  background-image: url(material.$test-logo);
}

8. Now try to compile your application with browser and application builder

Exception or Error

Above scenario should work with application builder as well

Your Environment

C:\Projects\projects\angular nws\ng17latest2>ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.0.5
Node: 18.18.2
Package Manager: npm 8.19.3
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.0.5
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.0.5
@angular/cdk                    17.0.2
@angular/material               17.0.2
@schematics/angular             17.0.5
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[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.}