Angular CLI：将图像路径添加到CSS的前缀

Question

在组件css中，图像链接如下所示：

background: url("/assets/map.jpg");

但是我需要在生产css中将图像路径解析为：

background: url("/static/assets/map.jpg");

可以通过Angular CLI执行此操作吗？

Answer 1

您可以将isDevMode与ngClass一起使用。假设你有css如下

.bg-dev {
    background: url("/assets/map.jpg");
}

.bg-prod {
    background: url("/static/assets/map.jpg");
}

使用ngClass在这两个班级之间切换。

<some-element [ngClass]="{'bg-dev': devMode , 'bg-prod': !devMode}">...</some-element>

并在您的组件中

import { isDevMode } from '@angular/core';

export class AppComponent { 
  devMode:boolean = false;

  constructor() {
     this.devMode = isDevMode();
  }
}