Can't build Angular library with SASS mixin from node modules

Setup: Angular 9 workspace with libraries, a test app and storybook using CDK's _overlay.scss in a .scss file with @use.

.storybook/
node_modules/
projects/
- library/
  - src/
    - lib/
      - component/
        component.scss // `@use`s `_overlay.scss`
  ng-package.json
- test-app/
angular.json

Issue: When using the overlay sass mixin @use "~@angular/cdk/overlay" the test app and storybook compile but ng-packagr can't find _overlay.scss.

ERROR: Can't find stylesheet to import.
  ╷
2 │ @use "~@angular/cdk/overlay";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  projects\library\src\lib\component\component.scss 2:1  root stylesheet
An unhandled exception occurred: Can't find stylesheet to import.

Workarounds:

It's possible to add node_modules/ to ng-package.json's "styleIncludePaths": "["../../node_modules"]" array and import the overlay mixin like @use "@angular/cdk/overlay" but then it doesn't work with the test app or storybook; also, the IDE can't resolve the path.
@use "overlay", "styleIncludePaths": ["../../node_modules/@angular/cdk"] and "stylePreprocessorOptions": {"includePaths": ["node_modules/@angular/cdk"]} works for the test app and library build but not for storybook; also, the IDE can't resolve the path. Maybe storybook can be configured to work with this setup.
Changing the path to @use "../../../../../node_modules/@angular/cdk/overlay" works during development but would fail in production when someone tries to add the library to their node_modules and @use the mixin.
Copying _overlay.scss into the library would work but it would need to be updated with every cdk change.
Providing a custom webpack.config could possibly work but it would need to be updated if angular changes under the hood.

Q: Shouldn't the import with tilde ~ actually work if "styleIncludePaths": ["../../node_modules/"] is set in ng-package.json? Is this an issue with ng-packagr?

Recommended topics

Hot tags