共享 CSS 文件 blazor

Question

我的 Blazor 应用程序中有 2 页工作：

Auth文件夹中的Login.razor

配置文件文件夹中的AddPerson.razor

现在我有一个适用于 AddPerson.razor 文件的 CSS 文件。

我的问题是如何为两个页面使用相同的 CSS 文件？

Answer 1

The strengths of the new .NET5 CSS isolation feature (placing a css file "below" your razor file), is that the css is NOT shared between pages/components making them easier to develop and contained/bundled to the specific component.

但是，如果您想添加一些可通过您的应用程序使用的共享 css，您可以通过编辑站点范围的 css 文件来“以旧方式”进行操作。 使用 Blazor 模板，即wwwroot/css/site.css用于服务器端或wwwroot/css/app.css用于客户端。

Answer 2

迟到的替代答案对不起。 我安装了“Web 编译器”扩展。 您可以创建一个.scss 文件，该文件导入另一个方便的定义等。

MessageView.razor.scss

@import "common.scss";

.bubble {
    border-radius: 5px;
    box-shadow: $bubbleShadow; 
...