angular-cli: Assets not found in scss/css when using base-href

fhbgjtgyjhuyhj

@chriseenberg this actually works fine for me: simply use

<img src="./assets/img/myimg">

and make sure your assets folder is set in .angular-cli.json in the assets section. I’ve used this pattern also in the scss-files, but the newest version broke this and i get a compile-error that those path’s cannot be resolved.

I see that this issue is closed but nobody provided a solution or a work around, so how do I solve it???

I have a styles.scss - which is the main application style file, it isn’t related to any specific component, so specifying the path from the component’s root isn’t relevant here . And I try to load a font from this file, with this code: src: url("/assets/fonts/SomeFont-Regular.ttf");

This code working great in ng serve mode. But when I deploy in to production with this line: ng build --prod --base-href="/app-name/" the font is missing (404 not found).

This happens because in production the browser is looking for the fonts at: www.my-server.com/assets/fonts/... instead of www.my-server.com/app-name/assets/fonts/....

So how do I solve this problem?? Does anyone has a work around???

P.S I try to change the url: url("assets/...") url("/assets/...") url("./assets/...") None work for me.

I’m running Angular 6.x

P.P.S I had the same issue with images referenced from scss file with background-image: url(/assets/1.png) but I solve this by replacing all the scss references to a html references <img src="assets/1.png">. However this work around will not work since I can’t load FONTs from html.

I used background: url(…); in the scss file to insert a background image instead of background-image: url(…); and it worked

I am having the same/similar issue – with no baseHref set.

In a component scss file I have the following:

  background: url('assets/profile-background.jpg');

When I do an ng build I get:

ERROR in ./src/app/xxxx/some.component.scss
Module not found: Error: Can't resolve './assets/profile-background.jpg' in 'C:\dev\xxxx\some\path'

@clydin I tried doing that, but that didn’t help. Actually, having to use a relative path is a part of the problem.

The problem in my case, is that I used to link the image like this, in the scss: background-image: url(assets/some_image.png)

This would work, as the url path wouldn’t be touched/changed, and the image placed in src/assets is correctly copied to the assets subdirectory in the ng build output.

But in the latest version of angular-cli, that won’t compile. If I change to a path relative to the scss file, as @clydin suggests, then angular-cli will happily compile it. But now the problem is that the url in the output CSS will look like this: background-image: url(some_image.png)

This works okay on the development server, but it does not work on the production server, because the image is not copied to the web root in the ng build output (it is copied to the assets subdirectory, as it should be).

In my case url("~src/assets/foo.svg") worked. As I see, every case is different 😉.

Dupe of #4778.

Please check out @clydin’s great answer at https://github.com/angular/angular-cli/issues/4778#issuecomment-280773798 regarding exactly what happened.

It works now. i navigated to the resource with …/ instead of ./ as you said @maxpfandl ! Thank you so much for your help!

Looks like some of the webpack-isms work for this issue too, ie url('~../src/assets/foo.svg') worked for me

relates to #4778