是否可以为多个组件创建一个 Blazor 范围的 CSS 文件而不复制它？

Question

Is it possible to create some sort of component scoped CSS file for multiple components without duplicating it?是否可以为多个组件创建某种组件范围的 CSS 文件而不复制它？ Is there any naming convention?有什么命名约定吗？

Lets assume there are three components which all use the same tags but a style should only be applied for components of naming scheme ComponentA .让我们假设有三个组件都使用相同的标签，但样式应该只应用于命名方案ComponentA 。 Other components should not be affected.其他组件不应受到影响。

ComponentA_A.razor
ComponentA_B.razor
ComponentOther.razor

having有

ComponentA.razor.css

instead of代替

ComponentA_A.razor.css
ComponentA_B.razor.css

If duplication is the only way, is it possible to use some kind of referencing in css file itself or referencing a specific css file in blazor component?如果重复是唯一的方法，是否可以在 css 文件本身中使用某种引用或在 blazor 组件中引用特定的 css 文件？

Answer 1

I've found a workaround for this, using custom scope identifier format .我找到了一种解决方法，使用自定义范围标识符格式。
It's not very elegant but you might consider it:它不是很优雅，但您可以考虑：

All .razor components need to have their respective .razor.css files:所有.razor组件都需要有各自的.razor.css文件：
```
 ComponentA.razor ↳ ComponentA.razor.css ComponentB.razor ↳ ComponentB.razor.css
```
One of the .razor.css files contains the css styles, the others can stay empty.其中的.razor.css文件包含CSS样式，其他人可以留空。

In your .csproj file add the following item group:在您的.csproj文件中添加以下项目组：

 <ItemGroup> <None Update="Components\\ComponentA.razor.css" CssScope="my-custom-scope" /> <None Update="Components\\ComponentB.razor.css" CssScope="my-custom-scope" /> </ItemGroup>

This will create the same custom scope my-custom-scope for all components it's applied to, and thus will apply the same styles to them.这将为它应用到的所有组件创建相同的自定义范围my-custom-scope ，因此将对它们应用相同的样式。

Answer 2

Another alternative (might not be applicable to the OP but it's a way) is to use a preprocessor like SASS then you can create mixin s and variable s that are shared across components but you can also use pure CSS solution nowadays using custom properties (variables).另一种选择（可能不适用于 OP，但它是一种方法）是使用像 SASS 这样的预处理器，然后您可以创建跨组件共享的mixin和variable ，但现在您也可以使用自定义属性（变量）使用纯 CSS 解决方案）。

So just to give an example using pure CSS you can do something like the following:因此，仅举一个使用纯 CSS 的示例，您可以执行以下操作：

In your _Host.cshtml file add a link to a global CSS file (in our example we gonna call it site.css ) like so:在您的_Host.cshtml文件中添加一个link全局 CSS 文件的link （在我们的示例中，我们将其称为site.css ），如下所示：

<head>
    ...
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorWebApp.styles.css" rel="stylesheet" />
</head>

Note, that we added the link to site.css above BlazorWebApp.styles.css which is a generated file for the CSS, depends on the setup though.请注意，我们添加链接site.css以上BlazorWebApp.styles.css这对CSS生成文件，取决于安装虽然。

Then you can define a CSS variable preferably in the :root but it can be anywhere, you can even create a dummy class called .variables and declare it there (cascading rules applies) but for the example we gonna stick with :root like so:然后你可以最好在:root定义一个 CSS 变量，但它可以在任何地方，你甚至可以创建一个名为.variables的虚拟类并在那里声明它（级联规则适用）但对于这个例子，我们将坚持使用:root像这样：

:root {
    --primary-color: #ff0000
}

And then we can use --primary-color across components and we can declare yet another variable say --component-a-color and use that for components related to ComponentA like so:然后我们可以跨组件使用--primary-color ，我们可以声明另一个变量说--component-a-color并将其用于与ComponentA相关的ComponentA如下所示：

ComponentA_A.razor.css ComponentA_A.razor.css

div {
    --component-a-color: #00ff00
    color: var(--component-a-color);
    background-color: var(--primary-color);
}

ComponentA_B.razor.css ComponentA_B.razor.css

div {
    color: var(--component-a-color);
    background-color: var(--primary-color);
}

ComponentOther.razor.css ComponentOther.razor.css

div {
    color: #0000ff;
    background-color: var(--primary-color);
}

ps I'm using separate files for the CSS here but this shouldn't matter. ps 我在这里为 CSS 使用单独的文件，但这无关紧要。

是否可以为多个组件创建一个 Blazor 范围的 CSS 文件而不复制它？

问题描述

2 个解决方案

解决方案1
4 已采纳 2020-11-21 13:43:42

解决方案2
1 2020-12-17 11:48:11

是否可以为多个组件创建一个 Blazor 范围的 CSS 文件而不复制它？

问题描述

2 个解决方案

解决方案1 4 已采纳 2020-11-21 13:43:42

解决方案2 1 2020-12-17 11:48:11

解决方案1
4 已采纳 2020-11-21 13:43:42

解决方案2
1 2020-12-17 11:48:11