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.

[destus90]

Spend lots of time trying to find a solution. I've only found a similar issue with no working answer 😕

@pmoleri did you find a workaround?

https://stackoverflow.com/q/78754692/8230845

[pmoleri]

Hi @destus90

I had 3 scenarios to consider:

• Running as an app (with optional path prefix)
• Building as a lib (where the consuming app can also change the path prefix)
• Tests

The only thing that made all of them work was to change all scss url(...) to relative paths like in the first example.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}