Aspnetcore.docs: Injecting custom css should be done without copying the entire swagger ui

[th0mk]

This tutorial instructs you to copy the entire swagger ui (that you already have) to simply add custom css. There is a much easier way to inject your stylesheet, which works like this:

• Create a wwwroot/swagger folder in the root of your project, and add custom.css to it.
• Add c.InjectStylesheet("/swagger/custom.css"); to your app.UseSwaggerUI in the Startup.cs file.
• And finally, add app.UseStaticFiles(); to your Startup.cs configure method.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 14fce65f-1337-58cb-2193-8d8e0e62792d
• Version Independent ID: 59222460-a971-e76e-4fe9-23d4d7d768ee
• Content: Get started with Swashbuckle and ASP.NET Core
• Content Source: aspnetcore/tutorials/getting-started-with-swashbuckle.md
• Product: aspnet-core
• GitHub Login: @zuckerthoben
• Microsoft Alias: scaddie

[Rick-Anderson]

@scottaddie that seems like a better approach.

[JinjinM]

The above way of customerizing the ui does not work for me. By looking at the inspector by F12 from browser, it shows "Failed to load resource: the server responded with a status of 404 (Not found)

[EasternBaron]

@JinjinM I had the same issue, as you had 404 Not Found. Though honestly I had "caused" it on purpose. The most likely reason of why you are getting this error is that you've forgot to add app.UseStaticFiles(); in Startup.cs configure method.

Oh and by the way this is very nice way of adding custom CSS to Swagger.

[JinjinM]

@JinjinM I had the same issue, as you had 404 Not Found. Though honestly I had "caused" it on purpose. The most likely reason of why you are getting this error is that you've forgot to add app.UseStaticFiles(); in Startup.cs configure method.

Oh and by the way this is very nice way of adding custom CSS to Swagger.

I have tried add app.UseStaticFiles() in Startup.cs and it worked! Thank you.

[mahavirsinhpadhiyar]

How can I run http://localhost:/swagger/ui/index.html and paste the json link and see the result.

[gopaljami]

@jinjinm i had the same issue even i added app.UseStaticFiles still same issue can you anyone help me out. Thank you.

[JinjinM]

@JinjinM i had the same issue even i added app.UseStaticFiles still same issue can you anyone help me out. Thank you.

@gopaljami would you like to post your code so that i can take a look?

[gopaljami]

app.UseAuthentication();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseMvc();
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
c.InjectStylesheet("/swagger/ui/custom.css");
});

[JinjinM]

@gopaljami I am not sure if deleting app.UseDefaultFiles would work. And might better to check your wwwroot folder, does it have a folder "swagger" and a subfolder "ui" with custom.css?

[rostyit]

@gopaljami I struggled with this for ages in my .net Core 2.2 project. Whatever I tried I found I was getting a 404 when it came to my custom css file...

I found that in the end I had to use the following when enabling static files:

        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(Directory.GetCurrentDirectory(), "docs")),
            RequestPath = "/docs"
        });

"docs" is the folder where I was keeping my custom.css. The above code snippet is available from here:

https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.2

then I used the following to enable swaggerUI

// enable the swagger UI
app.UseSwaggerUI(options =>
{
options.RoutePrefix = "docs";
options.SwaggerEndpoint("/swagger/v1/swagger.json", "API Version 1");
options.InjectStylesheet("custom.css");
});

I made sure the "custom.css" was made an embedded resource and suddenly everything sprang to life.

Hope the above is helpful.

[Rick-Anderson]

Moved to #16195