如何解决Angular项目SCSS编译中的图片路径解析错误？

针对你遇到的Can't resolve '../assets/Nairobi2x.jpg'错误，按以下步骤排查解决：

• 确认文件位置与名称
  检查Nairobi2x.jpg是否存在于/src/assets/目录下（你的SCSS文件在/src/scss/，../assets/指向的是src同级的assets目录），同时注意文件名大小写（Linux系统严格区分大小写，需确保和代码中的写法完全一致）。

• 修改路径引用方式
  推荐使用Angular支持的根路径写法，避免层级计算混乱：

  .login-body {
      background-image: url("~src/assets/Nairobi2x.jpg");
      background-size: cover;
      background-position: 100% 100%;
  }
  

  波浪号~会直接指向项目的src根目录，无需手动计算相对层级。

• 验证angular.json资源配置
  确保项目配置文件angular.json的assets数组包含src/assets，这样Angular编译时会正确打包该目录下的资源：

  "architect": {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        // 其他配置项...
      }
    }
  }
  

• 清理缓存重新编译
  缓存可能导致路径解析异常，执行以下命令清理后重新构建：

  ng clean
  ng build
  

内容的提问来源于stack exchange，提问作者Karan Chokshi