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

Question

I have a SCSS library packaged as npm module, it has the following structure:

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

And the _foo.scss contains a relative path to the image:

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

When I import the index.scss file in my Angular application's style.scss , I'm getting a compilation error, because the compiler can't resolve the path to the image for some reason, however, the path is correct (relative to the original SCSS-file).

1. Is there a way to help Angular to resolve such images correctly?
2. Is there a way to improve the library somehow to make it easier to use in Angular?

I know I can use a variable to specify the base path in the library and then override it in the project where I import it, but I rather won't do it this way, because it adds more clutter to the library itself and requires the end-developer to override the variable in order to use the library.

Answer 1

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