禁用角应用程序(ng build)中CSS中的URL检查。类似于库(ng构建一些-lib)

Question

我使用ng new my-application命令创建了一个棱角应用程序。此外，我还使用ng generate library my-lib在这个应用程序中创建了一个库。

下面是一个带有背景图像属性的简单CSS代码。图像文件不存在。

.class1 {
  background-image: url('./not-existing-file.png');
}

如果我将这些CSS代码放入库projects/my-lib/src/lib/my-lib.component.scss并运行ng build my-lib，那么库将成功构建。

但是，如果我将这些CSS代码放入src文件夹src/app/app.component.scss并运行ng build，则会得到错误：

NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\app.component.scss:2:2: Can't resolve '../not-existing-file.png' in 'C:\angular-tour-of-heroes\src\app'

我需要在ng build命令中禁用CSS中的URL检查，就像在ng build my-lib中一样。有可能吗？

Answer 1

您需要禁用css-加载器插件中的正在处理中 (再次需要使用外部web配置)。基本上，在您的web包配置中执行以下操作。

{loader: 'css-loader', options: {url: false}}

但我建议只在你的图书馆里嵌入图片。这样，在编译过程中，图像路径将被数据uris所取代。您只需在库中设置"cssUrl": "inline"，ng-package.json就可以使其工作。

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "cssUrl": "inline",
  }
}