Angular CLI 8 中是否有 --rebaseRootRelativeCssUrls 选项的替代方案？

Question

我遇到了很多问题，因为我的应用程序托管在一个子文件夹中，因此在.scss文件中引用的相对/assets/路径不起作用。 解决方案是启用--rebaseRootRelativeCssUrls选项以获得预期的行为。 使用该选项，构建过程通过注入“--base-href”值调整了我的/assets/路径，现在引用的图像和字体可以正确加载。

但是，我在文档中看到该选项已被弃用，并将在下一个主要版本中删除。

https://angular.io/cli/build （搜索--rebaseRootRelativeCssUrls ）

所以我的问题是，有什么替代方法，有没有其他方法可以获得相同的结果？

Answer 1

根据发行说明，推荐的转换方法是在 .scss 文件中使用相对 URL。 不过，在我看来，这似乎是个坏主意。 这是开发团队对记录的有关此问题的错误的评论。

https://github.com/angular/angular-cli/issues/14587#issuecomment-497368020

Answer 2

在您的angular.json内部，您可以设置多个资产文件夹

   "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/the/other/folder/assets",
          "src/assets",
          {
            "glob": "**/*",
            "input": "src/the/other/folder/assets",
            "output": "./assets"
          },
        ],

这使您拥有多个资产文件夹。

Answer 3

我通过这种方式使用路径解决了它：

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

而不是这种方式：

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

Answer 4

如果您的项目部署在子文件夹中，您可以将该信息传递给您的build命令

我建议你看看--base-href

在开发中，您通常在包含 index.html 的文件夹中启动服务器。 那是根文件夹，您需要在 index.html 顶部附近添加，因为 / 是应用程序的根目录。

但在共享或生产服务器上，您可能会从子文件夹提供应用程序。 例如，当加载应用程序的 URL 类似于 mysite.com/my/app/ 时，子文件夹是 my/app/，您应该添加到 index.html 的服务器版本。

您可以使用以下命令修改生产基地 href：

ng build --prod --base-href /subfolder/

您还可以将 base-href 设置为./ ，这表示当前目录与/相对，代表根目录。

另一种可能的解决方案是更改主index.html href

<base href="./">