How to import SCSS library with assets in Angular application?

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).

Is there a way to help Angular to resolve such images correctly?
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.

better convert the svg to base64 if you don't want to use the base path — John Velasquez
– John Velasquez, Commented May 24, 2018 at 1:56
@JohnVelasquez what if it's a large image and it's used only occasionally? — Slava Fomin II
– Slava Fomin II, Commented May 24, 2018 at 11:26
it really depends on you, but I think so far converting it to base64 is the best solution. — John Velasquez
– John Velasquez, Commented May 25, 2018 at 3:35
@JohnVelasquez is there a way to convert images to base64 on compilation automatically? — Slava Fomin II
– Slava Fomin II, Commented May 25, 2018 at 9:47
No idea either, you could ask another question maybe someone can help you. — John Velasquez
– John Velasquez, Commented May 26, 2018 at 0:53

jameslafferty · Accepted Answer · 2018-05-24 01:13:02Z

1

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

answered May 24, 2018 at 1:13

jameslafferty

2,1822 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slava Fomin II Over a year ago

Thank you. Yes, I also know about this workaround, but I rather not use self-referencing in the library, cause it will make harder to e.g. rename the module later on and it violates the DRY principle.

jameslafferty Over a year ago

I don't think you can do any better than that, at least for now.

Okonomiyaki3000 Over a year ago

This is very useful information and, yeah, I don't think you're going do any better than this unless you throw in some build process to insert the module name automatically.

Collectives™ on Stack Overflow

How to import SCSS library with assets in Angular application?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related