How to define global styles in an Angular Library for each entry point?

92 Views Asked by At

We have an Angular LIB Project with multiple entry points. Every entry point is independent, but can import and use other entry points as well.

The components in those entry points need mostly some global styling, which we defined in the parent Angular Applications which use the LIB. It looks sth. like this:

One entry point in the LIB:

enter image description here

Textarea does not have much css in its own style file:

enter image description here

But the textarea needs some other stylings, which we import in our parent Angular App. So the main styles.scss seems normally like this:

enter image description here

Now we want to define those imports (@use) in our LIB, so that the parents (Angular Apps) do not have to deal with styles of those individual modules/entryPoints.

It must be somehow possible to tell Angular, here is my 10 Entry Points, each has their own styles.scc. So at the end the textarea's styles.scss would contain just this line:

@use "@design/..../source/sass/patterns/textarea";

and the datepicker's styles.scss just contain ist own global styling. and so on.. And the parent Angular Apps do not have to define any styles for those components.. Is this possible? Thanks a lot.

0

There are 0 best solutions below