CODEWITHSUNDEEP
angularsasscompilation
Slava Fomin II
Slava Fomin II

Reputation: 28621

How to import SCSS library with assets in Angular application?

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.

Upvotes: 2

Views: 754

Answers (1)

jameslafferty
jameslafferty

Reputation: 2182

If you use url('~nameofnodemodule/assets/foo.svg') webpack should be able to find it.

Upvotes: 1

Related Questions