[ANGULAR] importing styles

[alexandru_tess]

Is there any way i can import the styles to the used component scss file and don't import globally?

[marcio]

Hey alexandru_tess,

Thanks for reaching out!

Could you provide more context of what you're trying to achieve? You can load the SCSS files only when using the component by adding the import in the respective component file source code, but after it's compiled and rendered, it'll be attached to the page DOM and it'll be available globally.

[alexandru_tess]

in https://bryntum.com/products/calendar/docs/guide/Calendar/quick-start/angular#apply-styles it's specified to import the bryntum calendar scss into src/styles.scss but what i want is to import the scss into the css file of the angular component that uses the bryntum-calendar component.

[alexandru_tess]

Example:

• calendar-view.component.html use <bryntum-calendar></bryntum-calendar>
• calendar-view.component.scss @import '@bryntum/calendar/calendar.material.css';
  but without modifying viewEncapsulation to none, doesn't work

[marcio]

Hey,

If you check the source code, we have

@Component({
    selector      : 'app-root',
    templateUrl   : './app.component.html',
    styleUrls     : ['./app.component.scss'],
    encapsulation : ViewEncapsulation.None
})

And in ./app.component.scss you have the imports, just like your scenario, where app.component.html uses <bryntum-calendar>.

Is there a reason for not using encapsulation : ViewEncapsulation.None in your scenario?

[alexandru_tess]

yes, because it's applying stiles globally.

[saki]

Another option would be to import Bryntum stylesheets globally but it's same. The calendar stylesheet just must be global because the component does not go through the Angular encapsulation logic.

If your application cannot use None as a view encapsulation then you can wrap the calendar in another Angular component and use ViewEncapsulation.None only in that component.