Unmounting the scss file added to Angular.json

[mateusduraes]

Question

Hello, I'd like to understand how I could unmount the CSS that we added to the angular.json file.

This is what I have in my Angular.json file.

"styles": [
              "src/styles.scss"
            ],

My setup basically loads whether the Angular application or a React application depending on the route. Basically, what I see is that the styles added to this main styles.scss are still in the DOM after the Angular app gets unmounted.

How can I remove that?

Environment

Libs:
- @angular/core version: 16.2.1
- single-spa-angular version: 9.0.1

[jano-kucera]

We faced the same issue, solved it with wrapping the selectors in the global styles in additional selectors.

They do not unmount, but at least they affect only what they should.

app-root, .cdk-overlay-container {
   ...rest of styles
}

[arturovt]

https://single-spa.js.org/docs/ecosystem-angular/#unmountable-styles