Angular 13升级至14时库编译报错：无法读取项目根目录外资源

问题背景 #

Angular库项目依赖存放在node_modules中的图片npm库，SCSS通过background-image: url('img/sprites.png')引用图片。从Angular 10升级到14后，出现图片无法读取警告，最终复制资源阶段报错：Cannot read assets from a location outside of the project root.，且无法通过angular.json配置assets或stylePreprocessorOptions。

可行解决方案 #

1. 在SCSS路径前添加~符号 #

Angular的SCSS预处理器支持用~指向node_modules目录，修正引用路径为：

css-class{
  background-image: url('~second-lib/img/sprites.png');
}

这个写法会让预处理器直接从node_modules/second-lib下查找图片，绕过项目根目录的资源检查限制。

2. 通过ng-package.json配置资源复制 #

Angular库项目使用ng-packagr打包，可在项目根目录的ng-package.json中添加资源复制规则，将node_modules中的图片复制到库的输出目录：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    {
      "glob": "**/*.png",
      "input": "../node_modules/second-lib/img",
      "output": "./img"
    }
  ]
}

配置后，打包时会自动将目标图片复制到库的img目录下，原SCSS中的url('img/sprites.png')即可正常引用。

3. 将图片转为Base64嵌入SCSS #

如果上述方法都不适用，可以将图片转为Base64编码，直接嵌入SCSS中，避免资源复制步骤：

css-class{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');
}

可以用在线工具或本地脚本批量转换图片为Base64，这种方式无需依赖外部资源文件，彻底解决跨目录读取问题。

4. 调整依赖图片库的打包方式 #

如果有权限修改图片npm库的代码，可以调整其打包配置：

• 在库的package.json中添加style字段，指向包含图片路径变量的SCSS文件
• 在SCSS文件中导出路径变量，比如：$sprites-path: '~second-lib/img/sprites.png';
• 主项目中引入该变量后使用：background-image: url(#{$sprites-path});

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