如何在构建时将 Blazor CSS 隔离文件复制到 wwwroot 文件夹？答案

【问题标题】：How to copy Blazor CSS Isolation file to wwwroot folder at build?如何在构建时将 Blazor CSS 隔离文件复制到 wwwroot 文件夹？
【发布时间】：2022-06-20 02:26:25
【问题描述】：

当前构建在具有 Blazor 集成的插件系统上，我在运行时引用 RCL 的组件。到目前为止，一切都很好，我已经能够克服大多数问题（路由、激活、生命周期、互操作和大多数可以想到的基本静态 Web 资产问题）。

但现在我在尝试支持组件 CSS 隔离时遇到了麻烦。
实际上，输出文件project.styles.css 或其已知对应物project.bundle.scp.css 没有被 ASP.NET Core 运行程序拾取，可以理解的是，它不知道如何在构建时生成的project.staticwebassets.runtime.json 文件中引用开发路径（这里是一个小sn-p）：

{
    "ContentRoots": [
        "D:\\source\\project\\wwwroot\\",
        "D:\\source\\project\\obj\\Release\\net6.0\\scopedcss\\bundle\\"
    ],
    "Root": {
        "Children": {
            "SocialGuard.YC.styles.css": {
                "Children": null,
                "Asset": {
                    "ContentRootIndex": 1,
                    "SubPath": "project.styles.css"
                },
                "Patterns": null
            }
        },
        "Asset": null,
        "Patterns": [
            {
                "ContentRootIndex": 0,
                "Pattern": "**",
                "Depth": 0
            }
        ]
    }
}

为简单起见更改了路径和项目名称

我的第一次尝试是弄清楚如何将文件嵌入到输出的 .dll 文件中，但遇到了一个丢脸的失败，以及发布时间基于 NuGet 的部署的一个大问题。

现在最大的问题在于，因为我已经不得不在路径上做出很多妥协，是否可以在构建时将 CSS Isolation 输出文件直接复制到 wwwroot 文件夹中？

我对 MSBuild 不是很了解，所以我祈祷有人对此有某种答案... ^^

【问题讨论】：

我对这个不太熟悉，但是我想你可以试试，如果你把它复制到wwwroot文件夹但不起作用，那么它就不能这样做。 this document 可能会有所帮助...
我不清楚为什么你想要这个。 RCL 中的普通MyComponent.razor.css 文件已经捆绑并包含在使用项目中。您是在谈论另一种形式的“CSS 隔离”吗？
@TinyWang 复制文件不是问题......这是如何使用正确的路径到达它。不用担心，我已经查看了文档，并且直接在 dotnet SDK repo 上的源代码中查看。可悲的是，仍然没有雪茄。
@HenkHolterman 那你不明白这个问题的微妙之处。由于 RCL 在运行时加载，作为插件，这意味着不会发生构建时捆绑。这就是问题的核心……
缺少相关文件，恐怕你的要求还不能实现......

标签： css asp.net-core msbuild blazor

【解决方案1】：

我试图出于不同目的使用同一个文件。
也许将其复制到wwwroot 会对您有所帮助。

documentation 声明如下：

在构建时，会按照约定创建项目包 obj/{CONFIGURATION}/{目标 FRAMEWORK}/scopedcss/projectbundle/{组件名称}.bundle.scp.css, 占位符在哪里：

{CONFIGURATION}：应用的构建配置（例如，Debug、发布）。
{TARGET FRAMEWORK}：目标框架（例如， net6.0).
{ASSEMBLY NAME}：应用程序的程序集名称（例如， Blazor 示例）。

所以我们可以使用 MSBuild properties 构建这个确切的路径，并在 Visual Studio 构建事件后复制该文件。

首先您可以使用以下命令测试路径：

ECHO "$(ProjectDir)obj\$(Configuration)\$(TargetFramework)\scopedcss\projectbundle\$(AssemblyName).bundle.scp.css"

接下来您可以将copy文件发送到wwwroot

COPY /D /Y "$(ProjectDir)obj\$(Configuration)\$(TargetFramework)\scopedcss\projectbundle\$(AssemblyName).bundle.scp.css" "$(ProjectDir)wwwroot\css\$(AssemblyName).bundle.scp.css"

$(ProjectDir) 是您的项目文件夹的路径。
$(Configuration) 返回 Debug 或 Release。
$(TargetFramework) 返回框架版本。例如net5.0。
$(AssemblyName) 当然会返回您的项目程序集名称，默认情况下也是您的作用域 css 包文件的名称。

【讨论】：