Conditional @section for stylesheets and scripts

Question

I was curious if there is a way to make my scripts conditional based on the environment? I've seen some examples similar to mine but for some reason the scripts do not render when published.

_ViewImports

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

Layout (does work)

@RenderSection("Styles", false)

@{
    if (@Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
    {
        <link href="~/css/test.css" rel="stylesheet" asp-append-version="true" />           
    }
    else
    {
        <link href="~/css/test.min.css" rel="stylesheet" asp-append-version="true" />
    }
}

View (what doesn't work)

@* @{
    if (@Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
    {
        @section Styles {
        <link rel="stylesheet" href="~/css/Folder/file.css" asp-append-version="true"/>
       }
        
    }
    else
    {
       @section Styles {
        <link rel="stylesheet" href="~/css/Folder/file.min.css" asp-append-version="true"/>
       }
        
    }
} *@

If I only pass Folder/file.min.css or Folder/file.css within the @section Styles they render. So I know both file versions exist; however, for some reason if @section is inside the @{} it doesn't render.

Note: Configuration value is inside my appsettings-development-json and I have confirmed both in debug and publish that the value is returned correctly.

buymeacoffee · Accepted Answer · 2025-01-03 03:14:24Z

You can change your code like beow.

@section Styles {
    @if (Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
    {
        <link rel="stylesheet" href="~/css/file.css" asp-append-version="true" />
    }

    else
    {
        <link rel="stylesheet" href="~/css/file.min.css" asp-append-version="true" />
    }
}

Test Result

Development

Production

My test css files.

Index.cshtml

@inject IConfiguration Configuration
@{
    ViewData["Title"] = "Home Page";

}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@section Styles {
    @if (Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
    {
        <link rel="stylesheet" href="~/css/file.css" asp-append-version="true" />
    }

    else
    {
        <link rel="stylesheet" href="~/css/file.min.css" asp-append-version="true" />
    }
}

_Layout.cshtml

    ...
    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2025 - _79325064 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
    @await RenderSectionAsync("Styles", required: false)
</body>
</html>

Hi Jason, Thanks for the example above. Looks like that worked in returning my min files.

Collectives™ on Stack Overflow

Conditional @section for stylesheets and scripts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related