Question

我有一个简单的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引用的资产与手动引用的资产之间的不一致。 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，但是可以。

请注意，它不会禁用处理，只是避免了不必要的/讨厌的文件复制，我认为这是您首先要的。

如何在Angular CLI应用中的CSS中禁用URL解析

1 个答案: