0

Okay,

I am really struggling by creating a nuget package for a BCL.

During the development, I have pushed created some *.scss files for my blazor components. Now, I want to use these components in a separate nuget package and consume it within other projects.

So far so good, but unfortunately all my css-files aren't within the nuget package.

What I've tried:

All my components has it's own *.scss file. After building the project, there are some css files, e.g. HelloWorld.razor.css.

When I am runing the dotnet pack command, there aren't any css files within the nuget package.

I've already included the EmbeddedResource Element to my csproj file, now I can see all the css file, but my BlazorApp won't apply the styles at all.

I've already studied the documentation (https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation) but I still not able to enable the styles.

I have also tryied to reference the project directly to my BlazorApp, and it worked. Is it a NuGet issue?

My csproj looks like follows:

<Project Sdk="Microsoft.NET.Sdk.Razor">

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <Nullable>enable</Nullable>
        <ImplicitUsings>enable</ImplicitUsings>
        <AssemblyVersion>1.0.12.0</AssemblyVersion>
        <FileVersion>1.0.12.0</FileVersion>
        <Version>1.0.12-rc.33</Version>
    </PropertyGroup>


    <ItemGroup>
        <SupportedPlatform Include="browser" />
    </ItemGroup>

    <PropertyGroup>
        <StaticWebAssetBasePath>_content/$(PackageId)</StaticWebAssetBasePath>
        <DisableScopedCssBundling>false</DisableScopedCssBundling>
        <ScopedCssEnabled>true</ScopedCssEnabled>
    </PropertyGroup>

    <ItemGroup>
        <EmbeddedResource Include="**\**\*.css" />
    </ItemGroup>

    <ItemGroup>
        <PackageReference Include="Delegate.SassBuilder" Version="1.4.0" />
        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.2" />
    </ItemGroup>
</Project>
SergejK
  • 59
  • 1
  • 8
  • Did you include in the main project that consume the component ? name = package id. If you look at network trace do you have a 200 on this file download ? – Remi THOMAS May 09 '22 at 15:45
  • yes, I've included the "BlazorApp.styles.css" furthermore, I've tried the following urls: PackageId/site.css PackageId/scoped.css PackageId/styles.css PackageId/PackageId.css _content/PackageId/site.css _content/PackageId/scoped.css _content/PackageId/styles.css _content/PackageId/PackageId.css nothing of these worked :-( I can clearly see the CSS files within the nuget package. If I understand the documentation correctly, it should work out of the box only by installing the nuget package – SergejK May 10 '22 at 08:12
  • Does this help you? https://stackoverflow.com/questions/44498659/how-do-you-add-additional-files-to-a-nuget-package-in-visual-studio-2017 – mu88 May 10 '22 at 13:00
  • Unfortunately, this solution doesn't work for me. But finally, I found a solution. From my point of view, it is a bit dirty, but it works. I've just removed the entries for all my *.css files within the gitignore as I am using *.scss. After doing this, all my components are looking great. However, I need to have both, scss AND css within git. – SergejK May 12 '22 at 10:33

0 Answers0