我可以在 blazor CSS 隔离之外制作外部样式吗？

Question

我有一个网站，其页眉、主要、页脚样式分为块等，它看起来像这样：

在 Style 中，我导入所有这些并将其链接到 html（并且我使用预处理器）

@import "Core.css"
@import "Header/Header.css"
@import "Main/Main.css"
@import "Footer/Footer.css"
@import "etc and so on"

所以我决定将我的网站移动到 Blazor 并在其上使用将样式分隔为块的方式，结果是这样的：

原来所有样式都在一个静态文件夹中，导入是独立于 MainLayout.style 的。

如果在静态索引中连接样式，则不需要单独导入。

现在我的问题是：

1. 是否可以这样做，是否符合 Blazor 样式指南？
2. 如果我不能这样做，那么如何更好地做到这一点？
3. 如果我能做到这一点，那么如何更好地做到这一点？
4. 如果我将 MainLayout 制作成会输出 css 的预处理器，它会比上述选项更好吗？

Answer 1

好吧，没有人回答，所以我会写下我的问题的答案。

我将 MainLayout 分为两部分 - HeaderLayout 和 FooterLayout，进行 CSS 隔离，并在 MainLayout 中将它们放在一起。

并使用伪类 ::deep 来支持子组件（来源：https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#child-component-support）。

我认为我的解决方案对应于 Blazor 样式指南，总的来说它非常有效。