The relative path image in the scss file is not added with base-href after ng build.

[mingyuezhaohuahai]

Command

build

Is this a regression?

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

In ng v10.x, the result of the build is as expected. ‼️

The previous version in which this bug was not present was

No response

Description

1、scss file

/* src/style.scss*/
/* this file config in styles of angular.json */

@import 'src/app/components/foo.scss';

/* src/app/components/foo.scss*/

$faceImg: './face.png';
.icon-face {
    background-image: url($faceImg);
}

There is a “face.png” picture in the folder：src/app/components

2、build command
ng build --base-href /login-app/ --deploy-url /login-app/

3、build result

.icon-face {
     background-image: url('face.xxxx.png')
}

Our project is a micro front-end, the base-href of the project is not included in window.location.url. As a result, the image cannot be obtained after ng build. ‼️

4、expect base-href in url

.icon-face {
     background-image: url('/login-app/face.xxxx.png')
}

In ng v10.x, the result of the build is as expected. ‼️

Minimal Reproduction

commands
ng build --base-href /login-app/

packages
"@angular-devkit/build-angular": "^15.2.9",
"@angular/cli": "^15.2.9",
"@angular/compiler-cli": "^15.2.9",

Exception or Error

No response

Your Environment

ng version       

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 15.2.10
Node: 18.17.0
Package Manager: npm 9.6.7
OS: darwin arm64

Angular: 15.2.10
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.10
@angular-devkit/build-angular   15.2.10
@angular-devkit/core            15.2.10
@angular-devkit/schematics      15.2.10
@schematics/angular             15.2.10
rxjs                            6.6.7
typescript                      4.9.5

Anything else relevant?

No response

[alan-agius4]

This is working as expected, given that the base-href is exclusively configured within the HTML document. Consequently, all relative resources referenced within the document will be loaded relative to this specified base.

See: W3C HTML Living Standard, Section 4.2.1.4

[mingyuezhaohuahai]

@alan-agius4 , our project is a micro frontend, if no base-href in image url, can not get img file, because the project base href not in location.url

[alan-agius4]

In that case you can use the deployUrl option

[mingyuezhaohuahai]

In that case you can use the deployUrl option

In this scenario, an SCSS file (which uses relative paths as background-image value) is not directly included as a component's styleUrls, but rather it is imported from the global styles.scss file using the @import directive. Consequently, after bundling, the image relative paths within this file will resolve only to the file names without any prefix from base-href or deploy-url.

[angular-automatic-lock-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.}