Search code examples
c#angularasp.net-coreasp.net-identityrazor-pages

Asp.Net Core 6 Add Bootstrap to scaffolded Identity _Layout.cshtml


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!


Solution

  • 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:

    enter image description here

    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" />