Skip to content

stylePreprocessorOptions.includePath is not following symlinks when using @angular-devkit/build-angular:application #27353

@mjamin

Description

@mjamin

Command

build, serve

Is this a regression?

  • Yes, this behavior used to work in the previous version

Description

I'm trying to include an .scss file from an external project that is symlinked into my angular project for development purposes.

Given the library symlink in this path:

<project-root>/lib/@scope/(->library)/_index.scss

and this configration in angular.json:

"stylePreprocessorOptions": {
  "includePaths": [
    "lib",
    "node_modules"
  ]
}

referencing the stylesheet like this:

@use '@scope/library' as lib;

does not work using @angular-devkit/build-angular:application.

It does however work using @angular-devkit/build-angular:browser.

Minimal Reproduction

  • Create a new angular project
  • Add a lib folder.
  • Add a symlinked directory to the lib folder
  • Add lib to stylePreprocessorOptions.includePaths
  • Reference an .scss file from the symlinked directory.
  • Run ng serve.

Exception or Error

✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @use '@scope/lib' as lib;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 1:1  root stylesheet [plugin angular-sass]

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

Your Environment

Angular CLI: 17.3.0
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.3.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, material-luxon-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.0
@angular-devkit/build-angular   17.3.0
@angular-devkit/core            17.3.0
@angular-devkit/schematics      17.3.0
@schematics/angular             17.3.0
rxjs                            7.8.1
typescript                      5.4.2
zone.js                         0.14.4

Anything else relevant?

The behavior is different when explicitly referencing the stylesheet like this:

@use '@scope/library/_index.scss' as lib;

or

@use '@scope/library/index' as lib;

Then it finds the file within node_modules where it is also present (since the library I'm symlinking into my project is normally a regular npm dependency). So @use '@scope/library' as lib; throws an error, @use '@scope/library/_index.scss' as lib; ignores the symlink and finds the file elsewhere.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions