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

【问题标题】：Angular CLI - How to resolve url in CSS or SCSS?Angular CLI - 如何在 CSS 或 SCSS 中解析 url？
【发布时间】：2023-04-03 05:44:01
【问题描述】：

我有一个组件，其 SCSS 使用 background-image: url('./logo.jpg') 引用同一组件文件夹中的图像。

删除前导 ./ 也无济于事。在任何情况下，图像都不会显示在浏览器中。

我正在运行ng serve 并查看dist 文件夹，logo.jpg 确实被复制并按预期放置在同一组件文件夹中。

我还希望能够引用来自我的 .css 或 .scss 文件所在文件夹之外的其他位置的图像，使用相对路径，就像我对 .ts 文件中的组件 .html 和 .css 所做的那样。

我想我需要某种 url 解析器来在输出的 .css 文件上生成完整的 URL。我如何获得这样的解析器以及如何在 Angular CLI 中配置它？

【问题讨论】：

【解决方案1】：

我注意到了类似的行为。

似乎在 Assets 文件夹下的 CSS 中引用的图像被提取并提供了一个 guid，而这不适用于组件级 CSS。

最后我复制了 Assets 文件夹下的图像文件（没有在 Angular-cli.json 中引用它），然后我能够在组件 CSS 中引用它：

背景：url(assets/img/bgs/footer.png);

【讨论】：

【解决方案2】：

遇到了同样的问题。通过将 Less/Sass 文件中的路径更改为 url(/assets/path_to_img) 来解决它，它应该可以工作。不要忘记开头的“/”，并将您的图像放在资产文件夹中。

【讨论】：

【解决方案3】：

尝试使用这个背景图片：url("./~/assets/images/artist-bg.jpg");

【讨论】：