CSS files are typically plain text and are not processed by ASP.NET Core, meaning server-side code cannot be executed within them. However, a solution is to use a Razor page to generate your CSS file in order to support Dependency Injection, although this may result in losing some of the CSS support provided by your IDE.
Below is an example of a PageModel for generating CSS:
public class CssModel : PageModel
{
public string TextColor => "green";
public void OnGet()
{
Response.ContentType= "text/css; charset=utf-8";
}
}
The content of the corresponding .cshtml file with null Layout setting:
@page
@model WebApplication3.Pages.CssModel
@{
Layout = null;
}
body{
font-family:consolas;
color: @Model.TextColor;
}
An example of a page utilizing the generated CSS, with the script outputted in a section:
@page
@model CssTestModel
@{
}
<h1>Hello World!</h1>
<p>This page tests Razor generated CSS</p>
@section styles{
<link rel="stylesheet" href="/css" />
}
Lastly, the head section of the layout page which includes the mandatory RenderSection call:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"]</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
@RenderSection("styles", false)
</head>