How to include bootstrap or other css library files in .bundle.scp.css

[sam-wheat]

Reference:

dotnet/AspNetCore.Docs#16837

dotnet/AspNetCore.Docs#20931

Documentation

1.) How to include bootstrap or other css library files in .bundle.scp.css

This documentation says:

To include companion assets as part of an RCL, create a wwwroot folder in the class library and include any required files in that folder.
When packing an RCL, all companion assets in the wwwroot folder are automatically included in the package.
Use the dotnet pack command rather than the NuGet.exe version nuget pack.

In my case the css in wwwroot is not not included in the bundle file. To reference wwwroot css in my project I have to the second link shown below in the consuming project:

<link href="_content/MyComponent/MyComponent.bundle.scp.css" rel="stylesheet" />
<link href="_content/MyComponent/css/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

In the file produced in obj/debug/net5.0/scopedcss/projectbundle/MyComponent/MyComponent.bundle.scp.css there is no reference to the wwwroot files. Here is the exact content:

@import '';

/* _content/MyComponent/MyComponent.razor.rz.scp.css */
.my-container[b-sd16mhok0g] {
  display: flex;
  flex: 1 1 0; }

I tried using dotnet pack as indicated in the documentation and referencing the nuget in the host project. It makes no difference. Currently I am referencing the RCL as a project so I can develop using dotnet run watch. Is this supported?

2.) How to isolate wwwroot level css libraries in RCL projects

This may be answered by #1 above however I want to ask specifically. My host project uses an older version of bootstrap and those styles are affecting my control.

[javiercn]

@sam-wheat thanks for contacting us.

The bundles that we generate are meant to contain only scoped CSS associated, not random CSS files.

We don't plan to support including other contents since we don't deal with things like ordering and de-duplication. We still recommend you place a link tag on your document head to bring in the regular CSS you need.

[sam-wheat]

Hi @javiercn,

I think what you said directly contradicts this line in the documentation cited above:

When packing an RCL, all companion assets in the wwwroot folder are automatically included in the package.

Are we talking about the same thing? If what you say is true the docs should definitely be changed as the current guidance is misleading.

Thanks for your response.

[javiercn]

Assets are included in the package, however you still need to reference them in your app.

It's not clear that the docs are misleading in that sense. It sounds pretty clear to me that it only talks about the content being included in the package, that's different from including a file within another file in the context of a different feature.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.