How to embed the scoped css bundle file generated by Razor class library?

Question

I'm looking to embed the scoped css bundle file that a razor class library project generates. This file is placed on the obj folder upon build. I'm having a challenge defining the correct msbuild target to emit the embedded resource at the right time during the build.

After much digging into the dotnet target files, this is what I currently have in the .csproj file.

<Target Name="EmbedScopedCss" BeforeTargets="BeforeResGen" AfterTargets="BundleScopedCssFiles">
    <ItemGroup>
        <EmbeddedResource Include="$(IntermediateOutputPath)scopedcss\bundle\$(PackageId).styles.css" Type="Non-Resx" WithCulture="false" />
    </ItemGroup>
</Target>

This is supposed to make the embedded resource item be emitted just before the BeforeResGen target, which is the last moment, to my knowledge, before resources are enumerated to be embedded into the assembly.

However, this still appears to be running too early in the build process, as the file itself does not exist at this time.

I have inferred AfterTargets="BundleScopedCssFiles" from the razor sdk scoped css target file but it doesn't appear to be enough.

Is there a way to do this?

Simon_Weaver · Accepted Answer · 2025-07-16 07:14:20Z

1

This should work.

<Target Name="EmbedScopedCss" BeforeTargets="ResolveAssemblyReferences" DependsOnTargets="BundleScopedCssFiles">
    <ItemGroup>
        <EmbeddedResource Include="$(IntermediateOutputPath)scopedcss\bundle\$(AssemblyName).styles.css" LogicalName="$(AssemblyName).styles.css" />
    </ItemGroup>
</Target>

The EmbeddedResource needs to be there before ResolveAssemblyReferences, but the bundle is generated at BundleScopedCssFiles. Therefore the AfterTargets does not work and you need to "trigger" that target by DependsOnTargets

// Read the embedded resource
using var stream = typeof(App).Assembly.GetManifestResourceStream("APPNAME.styles.css");
using var sr = new StreamReader(stream);
string css = sr.ReadToEnd();

edited Jul 16 at 7:14

Simon_Weaver

147k92 gold badges688 silver badges723 bronze badges

answered Oct 4, 2024 at 14:18

bmooij

1523 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon_Weaver Jul 16 at 7:16

Confirmed works with Blazor 9. I just added your code directly in no particular location in my csproj file.

Egiraht · Accepted Answer · 2021-12-29 17:03:09Z

If I correctly understand the MSBuild logs, the target that is responsible for CSS bundle generation for the current project is invoked after the project's assembly is already compiled.

Personally I have addressed this problem by using a separate Razor class library project for storing all components with scoped stylesheets. Then I mark its generated .styles.css file as EmbeddedResource in the main project's .csproj file:

  <PropertyGroup>
    <!-- Disable CSS bundle generation for the main project as we cannot embed it -->
    <DisableScopedCssBundling>true</DisableScopedCssBundling>

    <!-- Define the base namespace for embedded CSS bundles -->
    <ScopedCssEmbeddedResourceNamespace>$(RootNamespace).wwwroot</ScopedCssEmbeddedResourceNamespace>
  </PropertyGroup>

  <Target Name="EmbedScopedCssBundles" AfterTargets="BundleScopedCssFiles" BeforeTargets="MainResourcesGeneration">
    <!-- Search for generated *.styles.css files for the current build configuration in neighbor projects and embed them -->
    <ItemGroup>
      <ScopedCssBundle Include="$(ProjectDir)../**/$(Configuration)/**/scopedcss/bundle/*.styles.css" />
      <ScopedCssEmbeddedResource Include="@(ScopedCssBundle)"
                                 ResourceName="$(ScopedCssEmbeddedResourceNamespace).%(Filename)%(Extension)" />
      <EmbeddedResource Include="@(ScopedCssEmbeddedResource)"
                        LogicalName="%(ScopedCssEmbeddedResource.ResourceName)" />
    </ItemGroup>

    <!-- Optional messages for MSBuild log -->
    <Message Condition="'@(ScopedCssEmbeddedResource)' == ''"
             Text="No scoped CSS bundles found for $(Configuration) configuration" />
    <Message Condition="'@(ScopedCssEmbeddedResource)' != ''"
             Text="Embedding scoped CSS bundles for $(Configuration) configuration:" />
    <Message Condition="'@(ScopedCssEmbeddedResource)' != ''"
             Text="  %(ScopedCssEmbeddedResource.Identity) -> %(ScopedCssEmbeddedResource.ResourceName)" />
  </Target>

If the main project is named MyProject and the neighbor Razor class library project is named MyProject.RazorLib, the code above results in the scoped CSS bundle will be embedded in the main project's assembly under the name MyProject.wwwroot.MyProject.RazorLib.styles.css.

The downside of this approach is that every embedded CSS bundle must be referenced in markup individually.

I ended up having to use the two project approach as well. It's not nice but it works.

Collectives™ on Stack Overflow

How to embed the scoped css bundle file generated by Razor class library?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related