'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/tong-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@usethe mixin. - Copying
_overlay.scssinto 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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
