angular - 无法使用节点模块中的 SASS mixin 构建 Angular 库

Question

设置：带有库的 Angular 9 工作区、一个测试应用程序和使用 CDK 的故事书_overlay.scss，.scss文件中包含@use.

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

问题：在测试应用程序和故事书编译时使用覆盖 sass 混合@use "~@angular/cdk/overlay"，但 ng-packagr 找不到_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.

解决方法：

• 可以添加node_modules/到ng-package.json's"styleIncludePaths": "["../../node_modules"]"数组并像导入叠加层 mixin 一样@use "@angular/cdk/overlay"，但它不适用于测试应用程序或故事书；此外，IDE 无法解析路径。
• @use "overlay"，适用于测试应用程序和库构建，但不适用于故事书"styleIncludePaths": ["../../node_modules/@angular/cdk"]；"stylePreprocessorOptions": {"includePaths": ["node_modules/@angular/cdk"]}此外，IDE 无法解析路径。也许故事书可以配置为使用此设置。
• 在开发过程中更改@use "../../../../../node_modules/@angular/cdk/overlay"工作路径，但当有人尝试将库添加到他们的 node_modules 和@usemixin 时，会在生产中失败。
• 复制_overlay.scss到库中是可行的，但每次 cdk 更改都需要更新它。
• 提供自定义 webpack.config 可能会起作用，但如果引擎盖下的角度发生变化，则需要对其进行更新。

问：如果设置了波浪号，那么导入是否应该~实际工作？这是 ng-packagr 的问题吗？"styleIncludePaths": ["../../node_modules/"]ng-package.json

标签： angularsassng-packagr