CODEWITHSUNDEEP
angularsasskendo-uikendo-ui-angular2kendo-angular-ui
dinesh selvam
dinesh selvam

Reputation: 31

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 :

Image

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.

Upvotes: 1

Views: 68

Answers (1)

Naren Murali
Naren Murali

Reputation: 58071

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 {}

Upvotes: 0

Related Questions