Using externalDependencies for scss url() is incompatible wit karma

[pmoleri]

Command

build, serve, test

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I'm trying to use urls relative to the baseHref:

"builder": "@angular-devkit/build-angular:application",
"options": {
  "baseHref": "/testbase/",
  "externalDependencies": ["assets/*"],
  ...
}

then referencing assets like:

background-image: url('assets/lockup_angular.svg');

it works as expected when running the project but it fails on ng test.

I couldn't find any workaround, except using urls relative to the .scss files and getting them handled by the build.

Minimal Reproduction

1. Create an Angular project with scss, no SSR.
2. Configure the angular.json build with the following options:

   "builder": "@angular-devkit/build-angular:application",
   "options": {
     "baseHref": "/testbase/",
     "externalDependencies": ["assets/*"],
     ...
   }
   

3. ng generate component Test
4. In the scss add

   .test {
     // use path 
     background-image: url('assets/lockup_angular.svg');
   }

5. run npm test

Full example: https://github.com/pmoleri/angular-basehref-scss/blob/master/src/app/very/deep/folder/my.component/my.component.scss

Exception or Error

Can't resolve './assets/lockup_angular.svg' [postcss-loader]

Your Environment

Angular CLI: 18.2.1
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 18.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@angular/cli                    18.2.1
@schematics/angular             18.2.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Anything else relevant?

I tried all this combinations:

.relative-to-file {
  // ✔ in @angular-devkit/build-angular:application
  // ✔ in @angular-devkit/build-angular:karma
  // it's inconvenient compared to the other alternatives
  background-image: url('../../../../../assets/lockup_angular.svg');
}

.relative-to-project {
  // ❌ @angular-devkit/build-angular:application -> Could not resolve "src/assets/lockup_angular.svg" [plugin angular-css-resource]
  // ❌ @angular-devkit/build-angular:karma -> Can't resolve './src/assets/lockup_angular.svg' [postcss-loader]
  // Could not resolve "src/assets/lockup_angular.svg"
  // background-image: url('src/assets/lockup_angular.svg');
}

.tilde {
  // ❌ @angular-devkit/build-angular:application -> Could not resolve "~src/assets/lockup_angular.svg" [plugin angular-css-resource]
  // ✔ @angular-devkit/build-angular:karma
  background-image: url('~src/assets/lockup_angular.svg');
}

.external {
  // ✔ @angular-devkit/build-angular:application w/ "externalDependencies": ["assets/*"]
  // ❌ @angular-devkit/build-angular:karma -> Can't resolve './assets/lockup_angular.svg' [postcss-loader]
  background-image: url('assets/lockup_angular.svg');
}

[ddsharpdev]

Hello,
Did you try use background-image: url('/assets/lockup_angular.svg') ? (put forward slash before assets)

[pmoleri]

Hi @ddsharpdev. Ì forgot about that case. That was actually working for me until I got the need of using a baseHref, and it doesn't play nice with it because it tries to always go to the root of the server which is not what I want.