Asp.Net Core 6 添加 Bootstrap 到脚手架 Identity _Layout.cshtml

Question

I am using VS2022 Preview and have created a Single Page Application using Angular and the default project in VS2022. I have scaffolded the Identity pages so that I can change the styles by overriding bootstrap with one from Bootswatch. However, when I try to reference bootstrap from my lib folder in wwwroot like this:

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />

Then I get the error:

Refused to apply style from 'https://localhost:5002/lib/bootstrap/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I've tried various file paths here but nothing seems to work. Any help would be great as this seems like a trivial task!

Answer 1

The _Layout.cshtml page is generated by Scaffolded Identity, right?

If that is case, the Identity package also contains the Bootstrap reference, and by default the _Layout.cshtml page already adds the bootstrap reference using the following code, you could consider using it as a workaround.

<link rel="stylesheet" href="~/Identity/lib/bootstrap/dist/css/bootstrap.min.css" />

The result as below:

Besides, you could also try to use CDN reference:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

Answer 2

Please move your lib folder to wwwroot folder and reference it from there.