Angular v15迁v16（NX环境）SCSS资源路径解析错误求助

方法1：配置Webpack别名（适用于Webpack构建） #

在项目根目录创建或修改webpack.config.js，添加针对~apps的路径别名映射：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '~apps': path.resolve(__dirname, 'apps'),
    },
  },
};

如果是NX项目，也可以在对应项目的project.json文件的targets.build.configurations中嵌入Webpack配置：

{
  "targets": {
    "build": {
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    }
  }
}

方法2：配置Esbuild别名（适用于Esbuild构建） #

若项目使用Angular 16默认的Esbuild构建器，在项目的project.json中修改build目标的esbuildOptions：

{
  "targets": {
    "build": {
      "options": {
        "builder": "@angular-devkit/build-angular:browser-esbuild",
        "esbuildOptions": {
          "alias": {
            "~apps": "./apps"
          }
        }
      }
    }
  }
}

方法3：配置Sass预处理器路径 #

通过Sass的includePaths简化路径引用（可配合别名使用），在项目的project.json的build选项中添加：

{
  "targets": {
    "build": {
      "options": {
        "stylePreprocessorOptions": {
          "includePaths": ["./apps"]
        }
      }
    }
  }
}

配置后，SCSS中的路径可简化为url("platform/src/assets/img/bank-card-overlay.png")，若要保留~前缀，仍需结合前两种别名配置。

内容的提问来源于stack exchange，提问作者Mahdi Zarei