CLI angolare - Come risolvere l'url in CSS o SCSS?

Question

Ho un componente il cui SCSS fa riferimento a un'immagine nella stessa cartella componente, utilizzando background-image: url('./logo.jpg').

Rimuovere il leader ./ non aiuta neanche. In ogni caso, l'immagine non viene visualizzata nel browser.

Sto correndo ng serve e guardando la cartella dist, logo.jpg è in effetti copiato e inserito nella stessa cartella di componenti prevista.

Vorrei anche essere in grado di fare riferimento a immagini da altre posizioni al di fuori della cartella in cui risiede il mio file .css o .scss, utilizzando percorsi relativi come faccio con il mio componente .html e .css dal file .ts .

Penso di aver bisogno di una sorta di url resolver che generi l'intero URL sul file .css emesso. Come potrei ottenere un tale risolutore e come posso configurarlo in Angular CLI?

Answer 1

Ho notato un comportamento simile.

Sembra che le immagini referenziate nel CSS nella cartella Assets siano estratte e fornite di un guid, mentre lo stesso non si applica a CSS a livello di componente.

Alla fine ho copiato il file immagine nella cartella Assets (senza fare riferimento in Angular-cli.json) e poi sono stato in grado di fare riferimento a esso nel CSS componenti con:

sfondo: url (asset /img/bgs/footer.png);

Answer 2

Aveva lo stesso problema. Risolto cambiando il percorso nel file Less/Sass a url(/assets/path_to_img) e dovrebbe funzionare. Non dimenticare lo "/" all'inizio e mettere la tua immagine nella cartella delle risorse.

Answer 3

provare a utilizzare questo background-image: url ("./ ~/assets/images/artist-bg.jpg");