共享 CSS 文件 blazor答案

【问题标题】：Shared CSS file blazor共享 CSS 文件 blazor
【发布时间】：2020-12-05 10:37:48
【问题描述】：

我的 Blazor 应用中有 2 个页面正在运行：

Login.razor 在 Auth 文件夹中

AddPerson.razor 在 Profile 文件夹中

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

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

【问题讨论】：

标签： c# css blazor

【解决方案1】：

新的 .NET5 CSS 隔离功能（将 css 文件放置在您的 razor 文件“下方”）的优势在于 css 不在页面/组件之间共享，从而使它们更易于开发和包含/捆绑到特定组件.

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

【讨论】：

【解决方案2】：

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

MessageView.razor.scss

@import "common.scss";

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

【讨论】：