css Question posted in
Some basic documentation can be found here.

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/ 
}

This above is not a static URL. We need to set this dynamically on run time. May be from component.ts

.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

Tags:

2

Answers


  1. 0

    If you are ok with scss variables it’s possible.

    /* Add application styles & imports to this file! */

$mfePath: 'http://localhost:4300/';

.image {
  content: '';
  background-image: url(#{$mfePath}/assets/images/edit.svg);
  width: 12px;
  height: 6px;
  cursor: pointer;
}
    Login or Signup to reply.
  2. 0 
    const imageUrl = "http://localhost:4200/assets/images/edit.svg";
    .image-url {
  background-image: var(--image-url);
}
    <div class="image-url" [ngStyle]="{'--image-url': 'url(' + imageUrl +')'}">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search