TL;DR:

I need the Angular compiler to let me import CSS files in Typescript and turn them into <style> tags in the head.

Background:

I’m migrating an existing React app over to Angular. Each React component will eventually be rewritten, but in the meantime I’m hosting them in Angular components based on this method: https://medium.com/@joseph5/rendering-react-component-in-angular-apps-9154fa3198d1.

Each React component imports its own CSS programmatically in the .tsx:

import "./MyComponent.css";

This works fine when they’re running in the original React app, but Angular doesn’t like it. Instead of rendering a <style> tag in the head like the React app does, Angular just ignores the import with no effect that I can see.

The obvious solution is to import it into the Angular host component’s .scss:

@import 'react/MyComponent/MyComponent';

The problem here is that these React components have children, grandchildren, etc, and each imports its own stylesheet. I have to dig through all of them and make sure each is imported by the Angular component. It’s a huge pain to dig through everything recursively and maybe miss one. It would be extremely helpful if I could get Angular to process the existing import statements from the .tsx the same way React does, by adding a style tag in the head. Is there any way I can do this?

You need to sign in to view this answers