Angular CLI - 如何在CSS或SCSS中解析url？

Question

我有一個組件，其SCSS引用同一組件文件夾中background-image: url('./logo.jpg') ，使用background-image: url('./logo.jpg') 。

刪除前導./也沒有幫助。 在任何情況下，圖像都不會顯示在瀏覽器中。

我正在運行ng serve並查看dist文件夾，logo.jpg確實被復制並放置在與預期相同的組件文件夾中。

我還希望能夠引用我的.css或.scss文件所在文件夾之外的其他位置的圖像，使用相對路徑，就像我從.ts文件中使用我的組件.html和.css一樣。

我想我需要某種url解析器，它會在輸出的.css文件上生成完整的URL。 我如何獲得這樣的解析器以及如何在Angular CLI中配置它？

Answer 1

有同樣的問題。 通過將Less / Sass文件中的路徑更改為url(/assets/path_to_img)來解決它，它應該可以工作。 不要忘記開頭的“ / ”並將圖像放在assets文件夾中。

Answer 2

我注意到了類似的行為。

似乎在Assets文件夾下的CSS中引用的圖像被提取並被賦予guid，而這同樣不適用於組件級CSS。

最后，我將圖像文件復制到Assets文件夾下（沒有在Angular-cli.json中引用它）然后我能夠在組件CSS中引用它：

background：url（assets / img / bgs / footer.png）;

Answer 3

嘗試使用這個background-image：url（“./~ / assets / images / artist-bg.jpg”）;