How to construct background image URL using CSS variable in a SCSS file Angular

In Angular + single-spa application want to construct a image url in SCSS file using a CSS variable

Current Implementation:

.image {
content: '';
background-image: url('/assets/images/edit.svg');
width: 12px;
height: 6px;
cursor: pointer;
}


Its loading as http://localhost:4200/assets/images/edit.svg - SHELL application running in 4200. This image throws 404 when the application is integrated with single-spa SHELL application. So getting 404.

Actually expectation is http://localhost:4300/assets/images/edit.svg

So trying to set the prefix to actual MFE path. For eg:

: root {
--mfe-path: htt://localhost:4300/
}

.image {
content: '';
// background-image: url("var(--mfe-path, '')}/assets/images/edit.svg"); - option 1
// background-image: url("#{var(--mfe-path, '')}/assets/images/edit.svg"); - option 2
background-image: url(var(--mfe-path) + '/assets/images/edit.svg'); - option 3
width: 12px;
height: 6px;
cursor: pointer;
}


Tried extra webpack config also related to this. Nothing works out

Continue reading...