Blazor 范围内的 CSS 未在 Azure Pipelines 上构建

Posted 2023-03-27

【中文标题】Blazor 范围内的 CSS 未在 Azure Pipelines 上构建

【英文标题】：Blazor scoped CSS not building on Azure Pipelines

【发布时间】：2021-09-03 04:57:20

【问题描述】：

我正在开发一个使用范围 CSS 的 Blazor 应用程序，但是当我尝试使用 Azure Pipelines 构建它时，没有生成范围 CSS 文件。我在可以 RDP 进入的本地机器上构建，我看到 wwwroot/assemblyname.styles.css 文件在 dotnet publish 之后完全丢失

当我在同一台机器上手动运行 Azure Pipelines 显示的确切命令时，它就存在并且工作正常。

azure-pipelines.yml 任务：

- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '5.x'
...
- task: DotNetCoreCLI@2
  condition: succeeded()
  displayName: Publish my.project.blazor
  inputs:
    command: 'publish'
    publishWebProjects: false
    projects: 'src\my.project.blazor\my.project.blazor.csproj'
    arguments: '/p:Version=$(MainVersion).$(Patch) -o $(PublishFolder) -c Release -v d'
    zipAfterPublish: false
    modifyOutputPath: false

管道构建开始：

Starting: Publish my.project.blazor
==============================================================================
Task         : .NET Core
Description  : Build, test, package, or publish a dotnet application, or run a custom dotnet command
Version      : 2.187.0
Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/build/dotnet-core-cli
==============================================================================
C:\Windows\system32\chcp.com 65001
Active code page: 65001
Info: .NET Core SDK/runtime 2.2 and 3.0 are now End of Life(EOL) and have been removed from all hosted agents. If you're using these SDK/runtimes on hosted agents, kindly upgrade to newer versions which are not EOL, or else use UseDotNet task to install the required version.
C:\agent\_work\_tool\dotnet\dotnet.exe publish C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj /p:Version=1.0.17 -o C:\agent\_work\31\Publish -c Release -v d
Microsoft (R) Build Engine version 16.10.1+2fd48ab73 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

Build started 6/18/2021 1:53:30 PM.
     0>Process = "C:\agent\_work\_tool\dotnet\dotnet.exe"
       MSBuild executable path = "C:\agent\_work\_tool\dotnet\sdk\5.0.301\MSBuild.dll"
       Command line arguments = "C:\agent\_work\_tool\dotnet\sdk\5.0.301\MSBuild.dll -maxcpucount -verbosity:m -restore -target:Publish -property:PublishDir=C:\agent\_work\31\Publish -property:Configuration=Release -verbosity:d C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj /p:Version=1.0.17 -distributedlogger:Microsoft.DotNet.Tools.MSBuild.MSBuildLogger,C:\agent\_work\_tool\dotnet\sdk\5.0.301\dotnet.dll*Microsoft.DotNet.Tools.MSBuild.MSBuildForwardingLogger,C:\agent\_work\_tool\dotnet\sdk\5.0.301\dotnet.dll"
       Current directory = "C:\agent\_work\31\s"

如前所述，如果我在服务器上手动执行该命令，例如：

C:\agent\_work\_tool\dotnet\dotnet.exe publish C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj /p:Version=1.0.17 -o C:\agent\_work\31\Publish -c Release -v d

它工作正常，并出现生成的、作用域的 .css 文件。

这是手动输入时命令输出的开始（注意相同的 MSBuild 版本）：

Microsoft (R) Build Engine version 16.10.1+2fd48ab73 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

Build started 6/18/2021 2:06:57 PM.
     0>Process = "C:\agent\_work\_tool\dotnet\dotnet.exe"
       MSBuild executable path = "C:\agent\_work\_tool\dotnet\sdk\5.0.301\MSBuild.dll"
       Command line arguments = "C:\agent\_work\_tool\dotnet\sdk\5.0.301\MSBuild.dll -maxcpucount -verbosity:m -restore -target:Publish -property:PublishDir=C:\agent\_work\31\Publish -property:Configuration=Release -verbosity:d C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj /p:Version=1.0.17 -distributedlogger:Microsoft.DotNet.Tools.MSBuild.MSBuildLogger,C:\agent\_work\_tool\dotnet\sdk\5.0.301\dotnet.dll*Microsoft.DotNet.Tools.MSBuild.MSBuildForwardingLogger,C:\agent\_work\_tool\dotnet\sdk\5.0.301\dotnet.dll"
       Current directory = "C:\agent\_work\31\s"

我比较了这些日志文件的输出，发现了几个值得注意的地方，主要是：

管道：

1:7>Target "_GenerateScopedCssFiles" in file "C:\agent\_work\_tool\dotnet\sdk\5.0.301\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\Microsoft.NET.Sdk.Razor.ScopedCss.targets" from project "C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj" (target "_PrepareForScopedCss" depends on it):
       Skipping target "_GenerateScopedCssFiles" because it has no outputs.
       Though the target has declared its outputs, the output specification only references empty properties and/or empty item lists.
   1:7>Done building target "_GenerateScopedCssFiles" in project "my.project.blazor.csproj".
       Target "_PrepareForBundling" skipped. Previously built successfully.
       Target "ResolveStaticWebAssetsInputs" skipped. Previously built successfully.
       Target "_CollectAllScopedCssAssets" skipped. Previously built successfully.
   1:7>Target "BundleScopedCssFiles" in file "C:\agent\_work\_tool\dotnet\sdk\5.0.301\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\Microsoft.NET.Sdk.Razor.ScopedCss.targets" from project "C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj" (target "_PrepareForScopedCss" depends on it):
       Task "ConcatenateCssFiles" skipped, due to false condition; ('@(_ScopedCssProjectBundles)' != '' or '@(_ScopedCss)' != '') was evaluated as ('' != '' or '' != '').
       Task "ConcatenateCssFiles" skipped, due to false condition; ('@(_ScopedCss)' != '') was evaluated as ('' != '').

手动：

   1:7>Target "_GenerateScopedCssFiles" in file "C:\agent\_work\_tool\dotnet\sdk\5.0.301\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\Microsoft.NET.Sdk.Razor.ScopedCss.targets" from project "C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj" (target "_PrepareForScopedCss" depends on it):
       Skipping target "_GenerateScopedCssFiles" because all output files are up-to-date with respect to the input files.
       Input files: 
           Components\Configurator.razor.css
           Components\Option.razor.css
           Components\Options.razor.css
           Components\Popup.razor.css
           Components\Step.razor.css
           Pages\Index.razor.css
       Output files: 
           C:\agent\_work\31\s\src\my.project.blazor\obj\Release\net5.0\scopedcss\Components\Configurator.razor.rz.scp.css
           C:\agent\_work\31\s\src\my.project.blazor\obj\Release\net5.0\scopedcss\Components\Option.razor.rz.scp.css
           C:\agent\_work\31\s\src\my.project.blazor\obj\Release\net5.0\scopedcss\Components\Options.razor.rz.scp.css
           C:\agent\_work\31\s\src\my.project.blazor\obj\Release\net5.0\scopedcss\Components\Popup.razor.rz.scp.css
           C:\agent\_work\31\s\src\my.project.blazor\obj\Release\net5.0\scopedcss\Components\Step.razor.rz.scp.css
           C:\agent\_work\31\s\src\my.project.blazor\obj\Release\net5.0\scopedcss\Pages\Index.razor.rz.scp.css
   1:7>Done building target "_GenerateScopedCssFiles" in project "my.project.blazor.csproj".
       Target "_PrepareForBundling" skipped. Previously built successfully.
       Target "ResolveStaticWebAssetsInputs" skipped. Previously built successfully.
       Target "_CollectAllScopedCssAssets" skipped. Previously built successfully.
   1:7>Target "BundleScopedCssFiles" in file "C:\agent\_work\_tool\dotnet\sdk\5.0.301\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\Microsoft.NET.Sdk.Razor.ScopedCss.targets" from project "C:\agent\_work\31\s\src\my.project.blazor\my.project.blazor.csproj" (target "_PrepareForScopedCss" depends on it):
       Using "ConcatenateCssFiles" task from assembly "C:\agent\_work\_tool\dotnet\sdk\5.0.301\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\..\..\tasks\net5.0\Microsoft.NET.Sdk.Razor.Tasks.dll".
       Task "ConcatenateCssFiles"
       Done executing task "ConcatenateCssFiles".
       Task "ConcatenateCssFiles"
       Done executing task "ConcatenateCssFiles".

我不明白为什么 Azure Pipelines 触发的构建会显示 Skipping target "_GenerateScopedCssFiles" because it has no outputs.，但我认为这可能是我的问题的原因。

如何让 Pipelines 确定和捆绑我的 .css 文件？

【问题讨论】：

这听起来很奇怪，但我刚刚检查了一个我记得有类似问题的构建。虽然公平地说，我也在使用网络编译器，这增加了一些复杂性。我让它工作的唯一方法是在发布命令之前执行一个 .net 构建命令。值得一试

@AppPack 这太疯狂了，它有效！我不明白为什么，但确实如此。我只是在发布之前添加了一个构建步骤，构建到完全不同的输出目录，但随后发布突然也能正常工作了。发表您的评论作为答案，然后我可以接受:)

【参考方案1】：

我遇到了类似的问题。虽然公平地说，我也在使用 web 编译器，这增加了一些复杂性。

我让它工作的唯一方法是在发布命令之前执行一个 .net 构建命令。

值得一试

编辑：很高兴它也对你有用。和你一样，我不知道为什么会这样，在为一个低价值项目搞砸了太长时间的构建过程之后......一旦它成功了，我就没有研究为什么。

【讨论】：

我暂时将其标记为答案，它解决了我的问题，但它很愚蠢，必须有更好的解决方案，所以谁有更好的答案，请发布。

【参考方案2】：

不是完全相同的问题，但这可能会对某人有所帮助。我遇到了在pack 目标期间未检测到作用域css 的情况。具体来说，当我作为构建的一部分打包时，即 *.csproj

<Project Sdk="Microsoft.NET.Sdk.Razor">
   <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
   ...

有趣的是，它可以在第二个构建中工作 - （一旦 css 文件已经被编译）。对于上下文，我在构建过程中使用 BuildWebCompiler 将 less 编译成 css。

我花了很长时间查看 Razor.ScopedCss.targets 以确保 Web 编译器在作用域 css 捆绑之前运行，但它仍然无法正常工作。

我找到的解决方案是制作类似于以下的构建目标。

<Target Name="WebCompileExample" BeforeTargets="ResolveScopedCssInputs">
    <!-- Create Scoped css files. e.g. compile less files etc. -->

    <ItemGroup>
        <None Remove="**/*.razor.css" />
        <None Include="**/*.razor.css" />
    </ItemGroup>
</Target>

具体来说，<ItemGroup> 部分修复了它。我不知道为什么这只是我添加pack 步骤时的问题......但老实说，这就是我停止提问的地方。

这是相关的GitHub issue 让我了解了这一点。