Global scss styles not getting applied with single-spa-Angular

1.7k Views Asked by At

The global css present in the styles.scss file is not getting applied. I have used single-spa in the application

Below is my index.html file-

<!doctype html>
<html lang="en"> 
<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/"><meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="/src/styles.scss" type="text/scss" rel="stylesheet" />
</head>
<body>
  <app-root></app-root>
</body>
</html>

I am using single-spa version 5.9.4. I tried getting the global styles from the angular.json file but for one of the MFEs the global scss styles are not getting applied

3

There are 3 best solutions below

1
On

You should look in angular.json if it's not correct check a parent folder of src maybe another style.scss in there.

3
On

Edit: This specific issue has been resolved in the newer version of single-spa-angular (v9.0.1). The newer version of single-spa-angular event supports upto angular version 17. https://www.npmjs.com/package/single-spa-angular

It is a known issue in single page application in angular (v15). You can see the reported issue here: https://github.com/single-spa/single-spa-angular/issues/471 and there is a workaround fix to this issue here, you can see at https://github.com/single-spa/single-spa-angular/issues/463#issuecomment-1582486882

1
On

Try to add this in main.ts and main.single-spa.ts.

/// @ts-ignore
require('src/styles.css?ngGlobalStyle');

It's a knowed behaviour of single-spa.

Also refer to this Single-SPA Styles