在 Angular Nx 应用程序中导入 Kendo UI SCSS 文件模块/组件

Question

我正在使用 Nx 框架开发 Angular 应用程序，并集成了 Kendo UI 组件。为了优化和模块化样式，我将特定于每个组件的 SCSS 文件（例如所有 SCSS 文件）导入到单个 SCSS 文件中，如下面所附的屏幕截图：

我的目标是在每个模块或每个组件的基础上加载这些 SCSS 文件，而不是全局加载，以增强封装和性能。

问题：

是否可以在单个 Angular 模块或组件中而不是全局导入 Kendo UI 组件特定的 SCSS 文件？

如果是这样，在 Angular Nx 应用程序中实现此目标的推荐方法是什么？

在为 Kendo UI 组件实现模块式或组件式 SCSS 导入时，是否有任何最佳实践或注意事项需要注意？

任何有关如何实现这一点的指导或示例将不胜感激。

其他背景：

角度版本：18+ Nx版本：v19.6.1 Kendo UI Angular 版本：16+

感谢您的协助。

Answer 1

您可以准备每个模块要初始化的

scss

文件（将其存储在模块的根目录或styles文件夹中）。然后将样式导入文件添加到模块组件的styles数组中。

模块：

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

模块的组件：

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