Angular CLI 1.7.4引用assets图片时出现编译警告求助

开发者阿泽

2026-5-26

解决Angular CLI 1.7.4中SCSS引用Assets图片的编译警告

我之前用Angular CLI 1.7.4开发时也碰到过一模一样的postcss-url警告，其实问题核心在于资源路径的解析逻辑，下面给你几个实用的解决办法：

改用根路径开头的绝对路径
把你的SCSS代码调整成这样：
```
a.get-price{ background:url("/assets/images/icons/svg/icon-calc.svg") no-repeat center; }
```
开头加个斜杠，让编译器从项目根目录开始定位assets资源，postcss-url就能准确找到文件，警告自然就消失了。
用~符号指向src目录
Angular CLI里的~默认对应项目的src目录，这种写法也是官方推荐的资源引用方式：
```
a.get-price{ background:url("~assets/images/icons/svg/icon-calc.svg") no-repeat center; }
```
它能彻底避免相对路径带来的解析歧义，让编译过程更顺畅。
检查angular-cli.json的assets配置
因为你用的是1.7.4版本，配置文件是angular-cli.json，打开它确认assets数组里包含了"assets"目录：
```
"apps": [
  {
    // 其他配置项...
    "assets": [
      "assets",
      "favicon.ico"
    ],
    // 其他配置项...
  }
]
```
如果assets目录没被正确配置，编译器找不到资源，也可能触发这个警告。