Importing Kendo UI SCSS Files Module/Component-Wise in Angular Nx Application

Question

I am developing an Angular application using the Nx framework and have integrated Kendo UI components. To optimize and modularize the styling, I am importing SCSS files specific to each component like all the SCSS files into a single SCSS file like the attached screenshot below :

My goal is to load these SCSS files on a per-module or per-component basis, rather than globally, to enhance encapsulation and performance.

Questions:

Is it possible to import Kendo UI component-specific SCSS files within individual Angular modules or components instead of globally?

If so, what is the recommended approach to achieve this in an Angular Nx application?

Are there any best practices or considerations to be aware of when implementing module-wise or component-wise SCSS imports for Kendo UI components?

Any guidance or examples on how to implement this would be greatly appreciated.

Additional Context:

Angular Version: 18+ Nx Version: v19.6.1 Kendo UI for Angular Version: 16+

Thank you for your assistance.

I use :host ::ng-deep like this. It works very well, however ::ng-deep has been marked as deprecated for some time now. In the future you will have to switch to disabling viewencapsulation. This means an even stricter policy in not using kendo classes where you actually use your component — Pieterjan
– Pieterjan, Commented Dec 4, 2024 at 6:35

Naren Murali · Accepted Answer · 2024-11-25 09:00:14Z

0

There is no module level styles, only components can contains scoped styles.

You can prepare the scss file that you want to initialize per module (store it at the root of the module or in the styles folder). Then add the style import file to the styles array of the components of the module.

When you create the README.MD file, make sure you add a step that informs the user, to import the scss file that contains the scss imports common for all the components of your library.

Module:

@NgModule({ 
  declarations: [SomeComponent],
})
export class SomeModule {}

Module's Component:

@Component({
  selector: 'app-some',
  styles: [
    '../kendo-module-specific-style-imports.scss', 
    './app-some-component.scss'
  ],
  ...
})
export class SomeComponent {}

answered Nov 25, 2024 at 9:00

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Importing Kendo UI SCSS Files Module/Component-Wise in Angular Nx Application

1 Answer 1

Module:

Module's Component:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Module:

Module's Component:

Comments

Your Answer

Sign up or log in

Post as a guest

Related