Our pure JavaScript Scheduler component


Post by udo »

hi,

I am running on v5.2.8 and not getting CSS imports to work in the component where I am using them.

I tried to import them in my component in file /projects/rms/src/app/pages/planning-default/planning-default.component.scss like this:

@import "@bryntum/scheduler/scheduler.material.css";

my /projects/rms/src/app/pages/planning-default/planning-default.component.ts looks like this:

...
@Component({
  selector: 'app-planning-default',
  templateUrl: './planning-default.component.html',
  styleUrls: ['./planning-default.component.scss']
})
export class PlanningDefaultComponent implements AfterViewInit, OnInit {
...
}

I only get this to work if I import it in /src/styles.scss:

@import "@bryntum/scheduler/scheduler.material.css";

this of course makes the styles available everywhere, which is not ideal...

note: I sent an e-mail earlier today (11:57 CET) to support which contains the link to a demo github repo including access token. maybe easier to analize what is wrong.

thanks, udo


Post by marcio »

Hey udo,

We already have a similar issue before with styleUrls and it seems to be an Angular issue, check it here https://quizdeveloper.com/faq/css-component-not-working-when-defined-styleurls-in-angular-aid74

Can you try adding the CSS like this

    styleUrls     : ['./planning-default.component.scss'],
    encapsulation : ViewEncapsulation.None
})

Best regards,
Márcio


Post by udo »

BIG THANK YOU marcio! this indeed does the trick!
note: this definitely is some angular magic regarding view encapsulation -> which one day I will understand (hopefully) :|

with this, I also had to remove some additional magic from my classes, otherwise they would not apply (after the import)

:host ::ng-deep

Post Reply