SASS not working correctly with new builder

[HammamBM]

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

17.0.3

Description

This works in the same version 17.0.3 but with the previous builder. There are 2 main issues and happen with both "application" not the "browser-esbuild".

• @use doesn't work with absolute path with neither builder
• With @use component budgets go out of control with several warning and errors.

Minimal Reproduction

-@use with absolute paths on SCSS files and inline
-@use in component styles

Exception or Error

No response

Your Environment

Angular CLI: 17.0.3
Node: 18.16.1
Package Manager: npm 9.5.1
OS: win32 x64

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

Package                              Version
--------------------------------------------------------------
@angular-devkit/architect            0.1700.3
@angular-devkit/build-angular        17.0.3
@angular-devkit/core                 17.0.3
@angular-devkit/schematics           17.0.3
@angular/cdk                         17.0.1
@angular/cli                         17.0.3
@angular/material                    17.0.1
@angular/material-date-fns-adapter   17.0.1
@schematics/angular                  17.0.3
rxjs                                 7.8.1
typescript                           5.2.2
zone.js                              0.14.2

Anything else relevant?

No response

[alan-agius4]

Absolute imports are expected to fail as this used to work due to webpack specific behaviour. Please see: #26375

For the component budgets issue, please provide a minimal repro please.

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.

[HammamBM]

Absolute imports are expected to fail as this used to work due to webpack specific behaviour. Please see: #26375

For the component budgets issue, please provide a minimal repro please.

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.

Thanks so much for the response. I will be doing that this week then. Good to know about absolute paths, that was actually easy to fix with some replace all in the project, my main issue is the budget one because it stops us from deploying. I will try to recreate it on a repo and push it to github. Thanks so much for the quick response, appreciate it!

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

[HiReception]

I was able to produce a reproduction repo for this budget issue, and it would seem the difference is the setting of "sourceMap": true in the build configuration. In branch esbuild, the size of app.component.scss is listed as 22.77 kB; in the branch esbuild-with-sourcemap (which only has one line changed, the enabling of source maps), the size of the same file is listed as 104.69 kB.

https://github.com/HiReception/angular-esbuild-bug-demo

Hopefully this can point to the root cause of the issue; I would prefer if we could continue to use source maps in production for other reasons, and it doesn't seem like this setting should have an impact on the budget assessment system.

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