angular - 升级到 Angular 10 后无法在 scss 中的 url() 中使用 Assets

Question

我将我的 Angular 应用程序从 v9 升级到 v10。几乎一切正常，但我在 url("assets/images/some/path/image.png") 中使用的所有图像开始抛出异常-

ERROR in ./src/app/pages/about-us/about-us.component.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/shashank/Projects/curika/temp-ssr/src/app/pages/about-us/about-us.component.scss:4:20: Can't resolve './assets/images/about-us.png' in '/Users/shashank/Projects/curika/temp-ssr/src/app/pages/about-us'

  2 |   display: block;
  3 |   min-height: 500px;
> 4 |   background: url("./assets/images/about-us.png") no-repeat center;
    |                    ^
  5 | }

我尝试了各种旧链接，但没有一个奏效。

https://github.com/angular/angular-cli/issues/12797

https://github.com/angular/angular/issues/32811

Answer 1

不确定 Angular 10 有什么变化？
但我找到了三个解决方案。我知道的第一个解决方案是可行的，但在 中实现需要时间。现有 中型应用。但是，如果您只有少数 Assets 需要修复，那么您应该只选择第一个解决方案。
解决方案 1 - 使用相对 Assets 路径(推荐)
解决方案是使用您的 Assets 的相对路径(来自您的 .scss 文件)。基本上添加../直到 assets文件夹到达。

:host {
    display: block;
    min-height: 500px;
    // Using relative path
    background: url('../../../assets/images/about-us.png') no-repeat center;
}

优点

这种方法可以对静态 Assets 进行散列。一旦您的应用程序构建完毕(使用 ng build --prod )，您的 Assets URL 将被替换为 MD5 哈希值以突增缓存。
所以你的网址

background: url('../../../assets/images/about-us.png') no-repeat center;

将被替换为

background: url('about-us.add9979f32e1c969e6f8.png') no-repeat center;

这基本上是图像内容的 MD5 校验和。所以基本上，当图像即使改变一个像素时，这个校验和也会被 Angular 改变。这有助于您将来在更改图像同时保持文件名相同时突发缓存。
阅读更多 here为知识。

IDE(我使用 IntelliJ IDEA)不会显示您的 SCSS 文件中 Assets 的错误，这意味着如果文件路径错误，IDE 会提前告诉您。

你得到目录链接。这意味着如果我按 Ctrl 并单击上面 URL 中的目录，IDE 将打开该目录。

缺点

( 可管理的 ) 这可能是一种麻烦的方法，因为开发人员必须编写需要与 Assets 文件夹相关的 Assets 。

( 可管理的 ) 散列 Assets (在这种情况下是图像)将被复制到构建目录中的根文件夹(即 dist 默认情况下)，这可能会使您的任何类型的 URL 规则失败(例如，缓存规则)。所以，而不是——

https://example.com/assets/images/about-us.png

将使用以下 URL-

https://example.com/about-us.add9979f32e1c969e6f8.png

( Manageable ) 如果您更改组件的路径，您也必须更改图像 URL。

解决方案 2 - 快速修复
基于此处发布的答案 https://github.com/angular/angular-cli/issues/10004#issuecomment-375969537 , 添加 /在 URL 前面工作。

:host {
    display: block;
    min-height: 500px;
    background: url('/assets/images/about-us.png') no-repeat center;
}

优点

您不必添加许多 ../前缀使其成为相对 URL。

如果您更改了组件 SCSS 文件的路径，则不必更改 url("") 中的 Assets 路径。 .

缺点

如果 --base-href，则第二个解决方案在生产版本中将不起作用使用(如 here 所述)。 angular-cli#18043 .

即使路径正确，您的 IDE 也会不断显示路径错误。

你没有得到散列的 URL 来破坏缓存(与解决方案 1 不同)

解决方案 3 - 欺骗 Angular CLI 处理器(不推荐)
我查看了 CLI 代码并发现如果 URL 以 ^ 开头, Angular 通过绕过 URL 来忽略 Assets 。

:host {
    display: block;
    min-height: 500px;
    background: url('^assets/images/about-us.png') no-repeat center;
}

源代码- https://github.com/angular/angular-cli/blob/v10.0.0/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/postcss-cli-resources.ts#L72
优点

您不必添加许多 ../前缀使其成为相对 URL。

如果您更改了组件 SCSS 文件的路径，则不必更改 url("") 中的 Assets 路径。 .

缺点

正如一位 Angular CLI 开发人员在 #18013 (comment) 中所说的那样，此解决方案可能会在 future 的版本中被删除。