Angular Monorepo无法识别库路径：全局样式引入失败求助

问题根源 #

TypeScript配置文件（如tsconfig.app.json）中的paths别名仅对TypeScript文件生效，SCSS等样式文件的@import不会读取这些别名配置，需要单独为样式预处理器配置路径映射。

具体解决方案 #

方案1：通过angular.json配置样式预处理器路径（推荐） #

在每个需要引入共享样式的项目的angular.json中，找到对应项目的build配置节点，添加stylePreprocessorOptions指定共享样式的目录：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            // 保留原有配置
            "stylePreprocessorOptions": {
              "includePaths": [
                "../../shared/src/scss" // 根据你的项目结构调整路径
              ]
            }
          }
        }
      }
    }
  }
}

配置完成后，在项目的styles.scss中直接引入共享样式：

@import 'shared-styles.scss';

方案2：坚持使用路径别名的配置方式 #

1. 全局配置TypeScript路径别名
   在工作区根目录的tsconfig.json中添加全局路径别名（项目的tsconfig.app.json会自动继承此配置）：

   "compilerOptions": {
     // 保留原有配置
     "paths": {
       "@shared-src/*": ["projects/shared/src/*"]
     }
   }
   

2. 为样式预处理器添加别名映射
   在项目根目录创建.sassrc文件（适配Sass预处理器），添加别名映射：

   {
     "includePaths": ["../../shared/src"],
     "alias": {
       "@shared-src": "../../shared/src"
     }
   }
   

   之后即可在styles.scss中通过别名引入：

   @import '@shared-src/scss/shared-styles.scss';
   

额外检查项 #

• 确认shared-styles.scss文件确实存在于../../shared/src/scss路径下，目录结构无错误。
• 若shared是Angular库，确保已执行ng build shared完成构建，或在项目的angular.json中将shared列为依赖项。
• 避免使用~前缀（Angular 12+已弃用该路径解析方式）。

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