如何在适用于 Angular 应用程序和 karma 构建的 SCSS URL 中使用相对路径

Question

我已使用

@angular-devkit/build-angular:application

作为构建器将项目迁移到 Angular 18。在迁移过程中，SCSS 图像 URL 中的所有相对路径已从

"~/src/assets/images/..."

（webpack 样式表示法）更改为

"assets/images/..."

。成功构建应用程序后，一切都按预期进行。但是，如果我尝试运行我的 karma/jasmine 测试（karma 构建器显然使用 webpack 而不是 esbuild），我在构建时会收到以下错误

file.scss?ngResource - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):

myProj/src/app/xxx/file.scss:72:4: Can't resolve './assets/images/btn-left-menu.png' in 'myProj/src/app/xxx'

如果我将所有 URL 更改回 webpack 样式路径，karma 会构建、加载并执行测试，但应用程序构建会失败。是否可以以某种方式使用相对 URL，以便它们在两种构建环境中都可以工作，而不是切换回 webpack 构建器来应用程序？

尝试使用 karma.config.js 中的代理设置以及编写相对 URL 的替代方法，如“../../assets/images/...”、“./assets/images/...” 。绝对路径，即“/assets/images/...”可以工作，但我无法使用子域。

Answer 1

我遇到了这个确切的问题，只是因为更新到 Angular 18 而陷入困境，经过非常令人沮丧的搜索和多次尝试和错误（和发誓），我找到了解决方案！

角度.json：

//...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {

            "externalDependencies": ["assets/*"],  // <-- 
            //...