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

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.

Continue reading...