ng-packagr配置cssUrl为inline后背景图仍为相对路径如何解决

核心问题 #

你当前配置不生效的核心原因是：ngPackage.assets数组中定义的资源会被直接原封不动复制到输出目录，不会经过ng-packagr的CSS编译链路，cssUrl: inline规则自然不会作用到notifications.scss文件上。

调整步骤 #

• 第一步：将notifications.scss从ngPackage.assets数组中移除，仅保留需要静态复制的assets资源：

"assets": [
  "./src/assets/**/*"
]

• 第二步：调整notifications.scss的引入方式，让它进入编译链路：
  如果你是组件专属样式，在通知组件的@Component装饰器中通过styleUrls关联该文件即可：

  @Component({
    selector: 'xxx-notification',
    templateUrl: './notification.component.html',
    styleUrls: ['./notifications.scss']
  })
  

  如果你需要把该样式作为全局公共样式导出，直接在public-api.ts中添加导入语句：

  import './services/notifications/notifications.scss';
  

• 第三步：适配高版本ng-packagr的配置规则：
  如果你使用的是ng-packagr v13及以上版本，cssUrl配置已被废弃，需替换为styleUrl：

  "lib": {
    "entryFile": "src/public-api.ts",
    "styleUrl": "inline"
  }
  

• 第四步：清理缓存后重新编译：
  执行以下命令清理残留缓存后再执行构建，避免旧缓存影响结果：

  rm -rf dist .angular/cache node_modules/.cache
  ng build 你的库名称
  

效果验证 #

构建完成后查看输出的组件样式，background-image的url会自动转换为base64格式的内嵌内容。 #

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