css - 如何在 Angular 库中的 CSS 代码中使用图像

Question

我已经构建了一个库，它将被多个 Angular 应用程序（多个团队并且没有 monorepo）使用。这个库包括一个scss-theme。这个主题使用两个SVG文件。但是，我无法让它工作。路径总是不正确的。

我的主题scss：

.test::before {
    content: url('/test.svg');
}

我编写了一个原理图，库使用者可以使用它来将图像存储在应用程序资产文件夹的子目录中（例如 src/assets/test-path）。原理图确实按预期工作。

当我在客户端的scss 中添加以下样式时，它确实有效：

@import "test-company/test-lib/theme";

.a-client-test::before {
   // This is just an example and assumes that the test image is located at this path.
   background-image: url('../../assets/test-path/test.svg'); 
}

但是只要我删除上面的行（实际上使用资产文件夹中的图像并且根本不需要）。该路径将不再工作。

我在库中测试了以下路径：./test.svg, ~/test.svg, /test.svg. 只有后者可以工作，但只能在应用程序端使用像上面那样的附加样式（不会使用）。这是我想避免的事情，因为也许我们在库端提供了 50 个图标，并且仅添加这些类来使用资产会很乏味。

一些附加信息：

1. 我已将 node_modules 添加到angular.json.
2. 所有其他样式都正常工作。只有图像不起作用。
3. 我知道我可以ccsUrl: "inline"在ng-package.json. 但是，我认为此选项仅适用于（据我所知）组件使用的样式。但实际上我在构建过程之后复制了主题样式。此外，内联使用的图标数量不应太大，否则捆绑包大小会增加，因此不适合我。
4. 我也不知道这样的场景的最佳实践是什么。到目前为止，我只是想不出一个合适的方法。但我认为编写一个复制文件的示意图也不是最好的方法。也许有更好的方法（例如，一种从库中引用资产的方法，但请记住，我的库中有样式，因此对于所有模块来说，找出路径很复杂）。

再次说明一下：我的库有一个使用图像的 scss 文件。该图像路径在构建时是清晰的，但在应用程序使用时不起作用。我可以复制图像，但这仅在应用程序在样式中的某个位置使用这些图像时才有帮助。然后路径 /image.svg 工作。图像以及使用它的 scss 由我的应用程序提供。

谢谢你的帮助！

标签： cssangularangular-library