how to combine 2 :host() from different css and different values for angular

Issue

I have two components for angular, I want to combine their css into one file but I am having a problem because the :host() is different from one another, for example:

style1.css contains:

:host() {
    flex: 2;
    overflow: auto;
}

style2.css contains:

:host() {
    flex: 1;
    position: visible;
}

is there any way for it to be combined?

Solution

You can specify your component with its selector along with host like the following:

combine.scss

:host(app-one) {
  color: 'green';
}

:host(app-two) {
  color: 'blue';
}

components

@Component({
  selector: 'app-one',
  template: `<h1>Hello</h1>`,
  styleUrls: ['./combine.scss']
})
export class ChildTwo {}

@Component({
  selector: 'app-two',
  template: `<h1>World</h1>`,
  styleUrls: ['./combine.scss']
})
export class ChildOne {}

parent component

<app-one></app-one>
<app-two></app-two>

The project structure would be something like:

 > child-one.component.ts
 > child-two.component.ts
 > parent-component.ts
 > combine.scss

Of course this is just an example, you probably have on separate folders, so make sure you specify the path correctly within styleUrls array

demo

Answered By - Andres2142