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

Posted 2023-03-27

【中文标题】我可以在 blazor CSS 隔离之外制作外部样式吗？

【英文标题】：Can I make external styles outside of blazor CSS isolation?

【发布时间】：2022-01-01 07:59:48

【问题描述】：

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

在 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 的。

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

现在我的问题是：

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

【问题讨论】：

尝试阅读这个edcharbeneau.com/2021-04-24-setting-up-sass-with-blazor 我使用 SASS，但 CSS 隔离在 NET 6 和热重载下工作得很好。但我认为你可以像 SASS 一样使用手写笔

【参考方案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 样式指南，总的来说它非常有效。