Blazor Server 中的作用域 CSS 问题

huangapple go评论71阅读模式
英文:

Scoped CSS issue in Blazor Server

问题

我正在开发一个部署在Azure App Service上的Blazor Server应用程序(.NET 7),并希望对主题进行一些更改,首先从导航栏(Navbar)开始。

在标准的Blazor应用程序模板中,MainLayout.razor和NavBar.razor组件都有一个作用域的CSS文件,分别是MainLayout.razor.css和NavBar.razor.css。

我可以对这些文件(只是颜色)进行更改并在本地运行应用程序,它可以完美地工作。

然而,一旦应用程序部署,就好像这些更改不存在一样。它使用原始模板的旧CSS。这不是浏览器缓存的问题,因为我已经多次清除了缓存,使用了隐私窗口,不同的浏览器,不同的计算机等等。

我唯一能看到的区别是在部署时的构建配置是“Release”,而在本地运行时是“Development”。因此,我尝试更改管道中的此选项,看看是否能解决问题(即使这不是一个好的解决办法),结果是一样的——仍然使用“旧”的CSS。

奇怪的是,如果我使用“Release”构建选项在本地运行,我根本就得不到作用域的CSS。组件什么都没有,呈现为纯文本......

我看到一些其他帖子建议将主机设置为使用静态Web资产,所以在program.cs中添加:

builder.WebHost.UseStaticWebAssets();

这在本地运行时可以工作(即使使用“Release”构建配置),但是部署后,这会导致应用服务容器在启动时崩溃。而且,在Microsoft的文档中明确告诉我不要在部署的应用程序中使用此选项,链接如下:

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-7.0#static-files-in-non-development-environments-for-blazor-server-apps

我还怀疑这实际上是Azure App Service的某种奇怪问题,但这是一个没有其他服务在其前面的开发槽,不会缓存CSS的地方。

我以为也许是应用服务本身在做这个,但是自从旧的CSS代码部署到这个槽以来已经过去了好几天,所以我不认为是这个问题。

我还参考了这里的文档:

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-7.0

根据这些文档,这些作用域的CSS文件应该“正常工作”,但是为了确保,我设置了以下选项:

<PropertyGroup>
  <DisableScopedCssBundling>false</DisableScopedCssBundling>
  <ScopedCssEnabled>true</ScopedCssEnabled>
</PropertyGroup>

但是仍然没有结果。

我现在已经尝试将应用程序部署到一个全新的应用服务槽,并且发现它根本没有获得任何作用域的CSS(就像在本地测试Release构建时一样)——在这个全新的槽中,页面以纯文本加载。

所以可能我在应用程序中弄坏了CSS隔离的东西——但是不明显在哪里或者是如何发生的。如果有关于查找此问题的提示,将不胜感激。

我现在发现,构建/部署管道根本没有包含在发布的zip包中的任何CSS。这实际上是由于管道设置的方式造成的。对我来说仍然神秘的是,在此之前它是如何工作的,但是现在我已经找到了解决办法,所以这就不那么重要了。

管道代码的相关部分如下所示:

steps:
- task: UseDotNet@2
  inputs:
    installationPath: $(Agent.ToolsDirectory)/dotnet
    packageType: sdk
    version: 7.x

- task: DotNetCoreCLI@2
  inputs:
    command: 'build'
    configuration: $(buildConfiguration)
    projects: |
            $(workingDirectory)/*.csproj
    arguments: --output $(System.DefaultWorkingDirectory)/publish_output --configuration $(buildConfiguration)

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/publish_output'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/web-$(Build.BuildId).zip
    replaceExistingArchive: true

- publish: $(Build.ArtifactStagingDirectory)/web-$(Build.BuildId).zip
  artifact: drop

这会以'Release'模式运行构建,将构建输出打包成zip文件,并将其放在管道工作空间中,以供部署步骤在后续使用。问题是它不包括任何所需的CSS资产。

英文:

I am working on a Blazor Server app (.NET 7) deployed to an Azure App Service and looking to make some changes to the theme, starting with the Navbar.

In a standard Blazor app scaffold the MainLayout.razor and NavBar.razor components both have a scoped css file, MainLayout.razor.css and NavBar.razor.css respectively.

I can make changes (just colors) to these files and run the app locally and it works perfectly.

However, once the app is deployed, it's like the changes are not there. It uses the old css from the original template. This is NOT a browser cache issue, as I have cleared this repeatedly, used private windows, different browsers, different machines etc.

The only difference I can see is that the build configuration for the deploy is "Release" as opposed to "Development" when run locally. So I tried changing this option in my pipeline to see if that fixes it (even though this would not be a good solution) and the result was the same - the "old" css is used.

The weird thing is that if I run locally with the "Release" build option, I get no scoped CSS at all. The components get nothing, and render as plain text...

I saw some other posts which recommended setting the host to use static web assets, so adding to program.cs:

builder.WebHost.UseStaticWebAssets();

This works locally (even with "Release" build configuration), however when deployed this causes the app service container to crash on startup. I also am specifically told NOT to use this option in deployed apps in Microsoft's documentation here:

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-7.0#static-files-in-non-development-environments-for-blazor-server-apps

I also suspected that this is actually something strange with the Azure App Service, however this is a development slot which has no other services in front of it which could be caching the css.

I thought perhaps the app service itself was doing this, but it has now been several days since code with the old css has been deployed to this slot, so I do not think this is the case.

I also referred to the documentation here:

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-7.0

And according to those docs these scoped css files should "just work", however I went ahead and explicitly set the below options just to be sure:

&lt;PropertyGroup&gt;
  &lt;DisableScopedCssBundling&gt;false&lt;/DisableScopedCssBundling&gt;
  &lt;ScopedCssEnabled&gt;true&lt;/ScopedCssEnabled&gt;
&lt;/PropertyGroup&gt;

And still no result.

I have now tried deploying the app to a brand new app service slot, and I found that it is not getting ANY of the scoped CSS (just like when I test the Release build locally) -- the page loads in plain text on this fresh slot.

So probably I have broken something with css isolation in the app - but it is not apparent where or how this could have occurred. Any tips on where to look on this would be appreciated.

I have found now that the build/deploy pipeline was not including ANY css in the published zip package. This turned out to be due to the way the pipeline was set up. What is still mysterious to me is how it ever worked before, but I have the fix now so that's not so important anymore.

The relevant section of the pipeline code was:

    steps:
    - task: UseDotNet@2
      inputs:
       installationPath: $(Agent.ToolsDirectory)/dotnet
       packageType: sdk
       version: 7.x
      
    - task: DotNetCoreCLI@2
      inputs:
        command: &#39;build&#39;
        configuration: $(buildConfiguration)
        projects: |
          $(workingDirectory)/*.csproj
        arguments: --output $(System.DefaultWorkingDirectory)/publish_output --configuration $(buildConfiguration)

    - task: ArchiveFiles@2
      displayName: &#39;Archive files&#39;
      inputs:
        rootFolderOrFile: &#39;$(System.DefaultWorkingDirectory)/publish_output&#39;
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/web-$(Build.BuildId).zip
        replaceExistingArchive: true

    - publish: $(Build.ArtifactStagingDirectory)/web-$(Build.BuildId).zip
      artifact: drop

What this does is running the build in 'Release' mode, zips up the build output, and dropping it in the Pipeline workspace for the deploy step to pick up after. The problem is it does not include any of the needed css assets.

答案1

得分: 1

我在我的一侧进行了测试,正如你所看到的,我在 MainLayout.razor.css 中改变了一个样式并将其发布到了 Azure 网站,它起效了。我首先将原始应用程序发布到 Azure,然后再次更改了样式并进行了再次发布。

英文:

I had a test in my side, as you can see, I changed a style in MainLayout.razor.css and publish it to Azure web, it worked. I first published the origin app to Azure first then changed the style and published again.

Blazor Server 中的作用域 CSS 问题
Blazor Server 中的作用域 CSS 问题

答案2

得分: 1

看起来像我以前遇到的问题。这是我打开的S.O.页面,里面有解决方案:https://stackoverflow.com/questions/70436807/azure-include-assembly-styles-css-in-generated-packages

我错过了流水线的发布部分。

  • 任务:DotNetCoreCLI@2

    显示名称:'dotnet publish'

    输入:

    命令:publish

    项目:|

    '**\\xxx.csproj'
    

    配置:'Release'

    参数:'--output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'

英文:

It does look like an issue I had in the past. Here is the S.O. that I opened to find the solution https://stackoverflow.com/questions/70436807/azure-include-assembly-styles-css-in-generated-packages

I was missing the publish part of the pipeline.

  • task: DotNetCoreCLI@2

displayName: 'dotnet publish'

inputs:

command: publish

projects: |

'**\xxx.csproj'

configuration: 'Release'

arguments: '--output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'

答案3

得分: 0

代码部分不需要翻译,以下是翻译的内容:

"It turns out that non-Development builds do not include the .css files in the output. I had to add a publish step to this and the PUBLISH artifact includes all of the resources as you'd expect:

New YAML:
This runs the publish command directly to the same location the previous version did. I also had to make a minor update to the path that the deploy step was using to grab the zip package due to different folder structure of the output:
With the above changes the problem is solved."

英文:

It turns out that non-Development builds do not include the .css files in the output. I had to add a publish step to this and the PUBLISH artifact includes all of the resources as you'd expect:

New YAML:

    - task: UseDotNet@2
      displayName: Get .NET 7
      inputs:
       installationPath: $(Agent.ToolsDirectory)/dotnet
       packageType: sdk
       version: 7.x

    - task: DotNetCoreCLI@2
      displayName: Build
      inputs:
        command: build
        projects: $(workingDirectory)/*.csproj
        arguments: &#39;--configuration $(buildConfiguration)&#39;
    - task: DotNetCoreCLI@2
      displayName: Publish
      inputs:
        command: &#39;publish&#39;
        publishWebProjects: false
        projects: $(workingDirectory)/*.csproj
        arguments: &#39;--output $(build.artifactstagingdirectory) --configuration $(buildConfiguration)&#39;
        zipAfterPublish: true

    - task: PublishPipelineArtifact@1
      inputs:
        fileSharePath: $(build.artifactstagingdirectory)
        ArtifactName: &#39;drop&#39;
        publishLocation: pipeline

This runs the publish command directly to the same location the previous version did. I also had to make a minor update to the path that the deploy step was using to grab the zip package due to different folder structure of the output:

&#39;$(Pipeline.Workspace)/drop/*.zip&#39;

To this:

&#39;$(Pipeline.Workspace)/drop/a/*.zip&#39;

With the above changes the problem is solved.

huangapple
  • 本文由 发表于 2023年3月9日 13:51:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/75680870.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定