Angular：将 base-href 与 scss url 结合使用答案

【问题标题】：Angular: Using base-href in combination with scss urlsAngular：将 base-href 与 scss url 结合使用
【发布时间】：2021-11-19 18:49:56
【问题描述】：

我正在尝试将我的 Angular 应用程序部署到具有子域的服务器：website.com/magazine/。所以对此我正在运行 angular-cli 命令

ng build --prod --base-href=/magazine/

我的图片位于 src/assets/images 文件夹中。当我这样做时：

background-image:url('./assets/images/.....')

我通过 scss 中的 background-image 引用的图像没有显示，因为他试图从 website.com/assets/.... 获取图像，而忽略了子域。

当我这样做时（比如在 sr/app/components/component/component.scss 中）：

background-image: url('../../../assets/images/...')

它可以工作，但是图像存储在 dist 文件夹的根目录中，这是我不想要的。

当我这样做时：

background-image:url('~/assets/images/...');

或者这个

background-image:url('./assets/images/...');

我收到一个错误

NonErrorEmittedError: (Emitted value instead of an instance of Error)

我想要的是我可以参考图像并保持我的相对图像路径完整。我该如何做到这一点？

我正在使用 Angular 11 和 Angular cli 11.1.4

【问题讨论】：

我希望 background-image:url('assets/images/.....') 能够工作..？
url('assets/images/...') 不起作用。在我的 main.scss 中，我导入了其他几个 scss 文件，例如 @import 'layout/footer'。在构建期间我收到错误无法解析'./layout/assets/images/etc'

标签： angular sass angular-cli

【解决方案1】：

转到您的 index.html 文件并添加元素 <base href=

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Your app Title name</title>
  <base href="/magazine/"> <-- *** here ***---/>

【讨论】：

这就是 --base-href 标志已经在做的事情，不是吗？