禁用angular应用程序(ng-build)中CSS中的URL检查.就像在库中一样(ng构建一些lib)

Question

我使用ng new my-application命令创建了一个Angular应用程序。此外，我还在这个应用程序中使用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-heroessrcapp'

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

Answer 1

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

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

但是我建议只内联库中的图像。这样，在编译过程中，您的图像路径将被数据uri取代。您只需要在库ng-package.json中设置"cssUrl": "inline"即可使其工作。

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