Angular库内模块间共享导出SCSS文件的问题求助

问题核心 #

通过ng generate library创建的多个独立Angular库（如utils、breadcrumb），本质是相互独立的构建单元。即便在模块层面导入了UtilsModule，库内的SCSS预处理器也无法自动识别其他库的资源路径，导致@import 'utils/ics-styles';这类写法报错。

解决方案 #

方案1：保持多库结构，配置路径映射 #

如果需要保留多个独立库的结构，需为每个依赖库配置SCSS预处理器路径：

• 打开依赖库（如breadcrumb）的angular.json，在projects.breadcrumb.architect.build.options下添加stylePreprocessorOptions，指定utils库的SCSS目录路径：

  "stylePreprocessorOptions": {
    "includePaths": [
      "../utils/src/lib/styles"
    ]
  }
  

• 在breadcrumb的SCSS文件中直接导入目标SCSS文件名：

  @import 'ics-styles';
  

• 确保breadcrumb库的package.json中添加utils的本地依赖，比如：

  "dependencies": {
    "utils": "file:../dist/utils"
  }
  

方案2：合并为单个库（推荐，如你最终采用的方式） #

将所有需要共享资源的模块整合到同一个Angular库中，利用同一构建上下文的路径优势：

• 库内模块间使用相对路径导入SCSS，比如breadcrumb.component.scss中导入utils的样式：

  @import '../../utils/styles/ics-styles';
  

• 在库的ng-package.json中配置SCSS文件导出，方便父应用调用：

  "assets": ["**/*.scss"],
  "exports": {
    "./ics-styles": "./src/lib/utils/styles/ics-styles.scss"
  }
  

• 父应用依然可以通过@import 'your-library-name/ics-styles';正常使用共享样式。

内容的提问来源于stack exchange，提问作者Vianney