Javascript 此SASS结构是否影响React应用程序/组件加载时间/性能？

我正在开发我的第一个生产就绪的React应用程序，我正在使用SASS作为CSS的预处理器。我发现，在设计React组件的样式时，一个巨大的好处是能够将CSS分解为单独的模块，并将所需的特定模块导入到相应的React组件中

我的应用程序增长越多，就越难在开发过程中快速找到并更新所需的正确CSS。这就引出了我的问题

我正在考虑实施以下样式，我不确定它是否会对我的应用程序和组件的性能产生任何影响：

1-继续将所有CSS分离到SASS模块中
2-将所有这些模块导入单个app.scss文件
3-将单个app.scss文件导入所有需要设置样式的组件中

这将让我浏览一个地方-app.scss-找到我需要的特定css模块，然后快速告诉我需要在我的应用程序目录中访问该文件的位置。我认为这是有益的，因为我可以在app.scs中就每个模块写简短的评论。这样，随着应用程序的扩展，我将有关于每个css模块完成什么以及这些css模块对应哪些组件的文档

---

因此，我的问题是，这种将如此多的模块加载到单个css文件中，然后将单个css文件加载到每个需要设置样式的组件中的方式是否会降低我的应用程序/组件加载时间/性能？

您是如何使用类名的？它们是每种样式所独有的还是特定于页面的？