如何在角度库中使用CSS代码中的图像

我已经建立了一个库，将由几个Angular应用程序使用（多个团队，没有monorepo）。此库包含一个

scss

-主题。此主题使用两个

SVG

-文件。然而，我不能让它工作。路径总是不正确的

我的主题scss：

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

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

当我在客户端的SCS中添加以下样式时，它确实起作用：

@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个图标，添加这些类只是为了使用这些资源会很乏味

一些附加信息：

我在

angular.json

中的前置选项中添加了node_模块

所有其他样式都正常工作。只有图像不起作用

我知道我可以在

ng package.json

中使用

ccsUrl:“inline”

选项。但是，我认为该选项仅适用于（据我所知）组件使用的样式。但我实际上是在构建过程之后复制主题样式的。此外，内联使用的图标数量不应该太多，否则，捆绑包的大小将增加，因此对我来说不是一个选项

我也不知道对于这样的场景，什么是最佳实践。到目前为止，我只是想不出一个合适的方法。但我认为写一个复制文件的原理图也不是最好的方法。也许有更好的方法（例如，从库中引用资源的方法，但请记住，我的库中有样式，因此，所有模块的路径都很复杂）

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

---

谢谢你的帮助

你找到干净的解决方案了吗？@VladimirNesterovsky我不知道这是不是干净的解决方案。已经有一段时间了。但我已经使用PostSS来内联这些URL。我的postsss.config.js看起来是这样的：module.exports={语法：'postsss-scss'，插件：[require（'postsss-url'）（{url:'inline'}}}}}很遗憾，我已经不太了解了。但我认为这可以为你指明正确的方向。这对我很有效。你找到一个干净的解决方案了吗？@VladimirNesterovsky我不知道这是不是一个干净的解决方案。已经有一段时间了。但我已经使用PostSS来内联这些URL。我的postsss.config.js看起来是这样的：module.exports={语法：'postsss-scss'，插件：[require（'postsss-url'）（{url:'inline'}}}}}很遗憾，我已经不太了解了。但我认为这可以为你指明正确的方向。这对我很有效。