angular - 如何在 Angular CLI 应用程序中禁用 CSS 中的 URL 解析

Question

我有一个简单的 Angular CLI (6.0.7) 应用程序，它在 src/assets/ 文件夹中有一些 Assets 。其中一些在 Angular 组件的 CSS 文件中被引用。示例:

/* src/app/app.component.css */
.test-div {
    background: url(../assets/test.png);
}

当我使用 ng build 构建项目时，我最终得到如下输出结构:

dist/
  myapp/
    assets/
      test.png     <-- This one is simply copied from the src/asssets folder
    index.html
    main.js
    test.png       <-- This one is created by magic Angular CSS processing
    ...

此外，CSS 被重写为指向根目录中的 test.png 文件，而不是 assets 中的 test.png 文件文件夹。

我一点也不喜欢这种行为。我知道在生产模式下编译应用程序有一些好处，它会向 CSS 引用的 Assets 文件添加一些哈希前缀以防止缓存，但我不喜欢文件重复以及 CSS 中引用的 Assets 与手动引用的 Assets 之间的不一致 typescript 。所以我宁愿禁用这种特殊的 CSS 处理，这样 Angular 就不会解析 CSS 中的 URL 并保持 URL 原样。

那么我该如何禁用 Angular CLI 的这种神奇的 CSS 处理呢？

Answer 1

如 /assets/fonts/myfont.woff 中那样使字体/图像的路径成为绝对路径，如下所述: https://github.com/angular/angular-cli/issues/6599#issuecomment-379039521 为我解决了这个问题。

这是一个 hack，但它有效。

请注意，它不会禁用处理，它只是避免了不必要/烦人的文件重复，我认为这正是您首先想要的。