Angular CLI - How to resolve url in CSS or SCSS?

Question

I have a component whose SCSS references an image in the same component folder, using background-image: url('./logo.jpg').

Removing the leading ./ does not help either. In any case, the image does not show in the browser.

I am running ng serve and looking at the dist folder, logo.jpg is indeed copied and placed in the same component folder as expected.

I would also like to be able to reference images from other locations outside the folder that my .css or .scss file lives in, using relative paths like I do with my component .html and .css from the .ts file.

I think I need some sort of url resolver that would generate the full URL on the outputted .css file. How would I obtain such a resolver and how do I configure it in Angular CLI?

Answer 1

Had the same problem. Solved it by changing the path in the Less/Sass file to url(/assets/path_to_img) and it should work. Don't forget the "/" at the beginning and to put your image in the assets folder.