如何在Angular应用程序中导入带有资产的SCSS库？

Question

我有一个打包为npm模块的SCSS库，它具有以下结构：

./index.scss
./partials/_foo.scss
./assets/foo.svg

_foo.scss包含图像的相对路径：

.foo {
  background-image: url('../assets/foo.svg');
}

当我在Angular应用程序的index.scss中导入style.scss文件时，我收到编译错误，因为编译器由于某种原因无法解析图像的路径，但是，路径是正确的（相对于原始SCSS文件）。

1. 有没有办法帮助Angular正确解析这些图像？
2. 有没有办法以某种方式改进库以使其更容易在Angular中使用？

我知道我可以使用变量来指定库中的基本路径，然后在我导入它的项目中覆盖它，但我宁愿不这样做，因为它会给库本身增加更多的混乱并要求最终开发人员覆盖变量以使用库。

Answer 1

如果你使用url('~nameofnodemodule/assets/foo.svg') webpack应该能够找到它。