Undocumented behavior difference between angular 16 and angular 17 when importing SCSS from node_modules

[dezsiszabi]

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

16.2.11

Description

Working example using ng16: https://github.com/dezsiszabi/ng17-bug-report-3-working/tree/main

Non-working example using ng17: https://github.com/dezsiszabi/ng17-bug-report-3-not-working/tree/main

Just clone, install dependencies and then try npm run build.

Working example builds fine.
Non-working example throws exception when encountering previously working SCSS import.

X [ERROR] Can't find stylesheet to import.
  ╷
3 │ @import "node_modules/bootstrap/scss/bootstrap";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 3:9  root stylesheet [plugin angular-sass]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~

Minimal Reproduction

See description.

Exception or Error

No response

Your Environment

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


Angular CLI: 17.0.9
Node: 20.10.0
Package Manager: npm 10.2.3
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.9
@angular-devkit/build-angular   17.0.9
@angular-devkit/core            17.0.9
@angular-devkit/schematics      17.0.9
@angular/cli                    17.0.9
@schematics/angular             17.0.9
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.3

Anything else relevant?

I didn't see anything mentioned in the changelog about possible breaking changes related to SCSS imports.
I did see that the dart-sass dependency got upgraded between ng16 and ng17, and that there was some rework related to imports, but I assume that shouldn't have broken anything.
Note: I can resolve this by adding the following to angular.json:

"stylePreprocessorOptions": {
  "includePaths": [
    "./"
   ]
}

Can you please confirm if this is the intended fix? Or is this an actual bug, and the behavior shouldn't have changed between ng16 -> ng17?

[alan-agius4]

This is quite an edge case and is caused because you have node_modules in the import path. This is redundant when using a bundler.

- @import "node_modules/bootstrap/scss/bootstrap";
+ @import "bootstrap/scss/bootstrap";

[dezsiszabi]

Does this mean that this is an intended change?

Also is the proposed stylePreprocessorOptions option a viable one? I'm asking because modifying every single import we have is going to take a while... Some of them are in other packages we import from node_modules and they do also have node_modules in their imports and so on transitively...

[alan-agius4]

Adding ./ to the includePaths path in that case is the recommended approach as would restore the same behaviour as that of the webpack sass-loader which add that include path by default.

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