如何将Blazor CSS隔离文件复制到WWWROOT文件夹？

Question

目前，我在使用Glazor Integration的插件系统上构建，我在运行时引用了RCLS的组件。到目前为止，我已经能够克服大多数问题（路由，激活，终生，Interop和大多数基本的静态Web资产问题）。

，但是现在我在试图支持组件CSS隔离的同时跑了一个障碍。
实际上，输出文件 project.styles.css 或其已知的对手 project.bundle.scp.css 未被ASP.NET Core Core Runner拾取可以理解的是，不知道如何在构建时间生成的 project.staticwebassets.runtime.json.json 文件中引用开发路径（这是一个小片段）：

{
    "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
            }
        ]
    }
}

为简单起见，更改了路径和项目名称。 em>

我的第一次尝试是找出如何将文件嵌入到输出.dll文件中，但会陷入屈辱的失败，以及对基于Nuget的部署的最大关注点。

现在的一个大问题是，因为我已经不得不在路径上妥协了很多，是否可以直接通过CSS隔离输出文件复制到 wwwroot 文件夹，在构建时间？

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

Answer 1

我试图出于不同的目的将我的手放在同一文件上。
也许在 wwwroot 中复制它会为您提供帮助。

文档陈述以下内容：

在构建时间，与公约创建了一个项目捆绑包
obj/{configuration}/{target
框架}/scopedcss/projectBundle/{assembly name} .bundle.scp.css，
占位符在哪里：

{configuration}：应用程序的构建配置（例如，调试，
释放）。
{目标框架}：目标框架（例如，
net6.0）。
{汇编名称}：应用程序的汇编名称（例如，
Blazorsample）。

因此，我们可以使用 MSBUILD属性并在Visual Studio Post Build Events上复制文件。

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

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

下一步您可以 wwwroot $（projectDir）的文件

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

• 是您项目文件夹的路径。
• $（configuration）返回 debug 或 Release 。
• $（targetFramework）返回框架版本。例如 net5.0 。
• $（assemblyName）当然返回您的项目组装名称，默认情况下，这也是示波器CSS捆绑文件的名称。

Answer 2

我认为您正在寻找的是复制在建造和捆绑CSS之后，制定动作以触发。因此，在您的示例中，您将在应用程序的CSPROJ文件的末尾添加类似的内容：

<Target Name="CopyCssBundles" AfterTargets="AfterBuild">
    <ItemGroup>
        // Include path to whatever file(s) you want to copy from RCL, separated by a semi-colon
        // Also works with relative paths
        // Also allows glob patterns (e.g., ...\scopedcss\**\*.* to include all files in the scopedcss directory)
        <MyCssBundles Include="{path_to_RCL_project}\obj\$(Configuration)\$(TargetFramework)\scopedcss\bundle\{RCL_assembly_name}.styles.css" />
    </ItemGroup>

    // Source files are whatever you named the above tag ("MyCssBundles" in this example)
    <Copy SourceFiles="@(MyCssBundles)" DestinationFiles="wwwroot\%(RecursiveDir)%(Filename)%(Extension)" OverwriteReadOnlyFiles="true" />
</Target>

％（recriveRivedir）将根据Include模式保留您包含的任何文件的目录树。如果您希望在 wwwroot 中直接使用文件，则可以删除该文件，也可以指定子目录以也将其放入中（例如， wwwroot \ css \ css \％（fileName）％（extension）％（扩展）< /代码>）。如果目录不存在，则将在复制时创建它。

如果您想将内容分开以更可读，则还可以让Multilpe ItemGroup /复制对配对。