Angular 15从assets加载SCSS背景图遇404及编译错误问题

算力阿峰

2026-7-13

Angular 15 SCSS加载Assets图片问题解决方案

核对SCSS文件的相对路径层级
不带斜杠的路径编译报错，核心原因是SCSS文件所在目录和assets的相对层级没匹配对。举个例子：如果你的SCSS在src/app/components/header/header.component.scss，那得用../../assets/images/layout-1/cover.png——从当前组件目录往上跳两级到src根目录，再进入assets文件夹。直接写assets/xxx会从SCSS所在目录找assets，自然找不到触发编译错误。
用Angular的@别名定位assets
Angular默认把@映射到src目录，不管你的SCSS在哪个层级，直接写url("@/assets/images/layout-1/cover.png")就能精准定位到src下的assets资源。部分旧版本可能需要加~前缀，写成url("~@/assets/images/layout-1/cover.png")，15版本优先试不带~的写法。
确认angular.json的assets配置位置
确保assets配置在build选项的options下面，别放错位置。正确配置示例：
```
"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      // 其他构建配置...
    }
  }
}
```
另外检查生产环境配置（configurations.production）里有没有单独覆盖assets的设置，避免生产构建时路径出问题。
清理缓存后重新构建
缓存可能导致路径解析异常，执行以下命令清理后再重新构建：
```
ng cache clean
ng build --delete-output-path
```
修复内联样式的路径问题
内联用/assets/xxx报404，先看构建后的dist目录，确认assets文件夹是不是在dist根目录。如果项目配置了baseHref（比如"baseHref": "/my-app/"），那路径要改成/my-app/assets/images/layout-1/cover.png；或者用相对路径assets/images/layout-1/cover.png——内联样式的相对路径是相对于index.html的位置，只要assets在dist根目录，这个写法就能正常加载。