时间戳

首页 > 解决方案 > 如何在 Angular CLI 应用程序中禁用 CSS 中的 URL 解析

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

问题描述

我有一个简单的 Angular CLI (6.0.7) 应用程序，它在src/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根目录中的文件，而不是test.png文件assets夹中的文件。

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

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

标签： angularangular-cliangular-cli-v6

解决方案

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

这是一个黑客，但它的工作原理。

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

推荐阅读