Blazor CSS not loading

Question

We've been using Blazor for a few months with Radzen and recently Spinkit. I merged some changes from master into my features branch and the system now can't resolve css from the packages. The changes merged were completely isolated from Blazor specific code, just injected service classes not related to web, as well as moving Autofac registrations to the Program.cs. I just can't put my finger on what could have gone wrong. If I hard reset back to the branch prior all is good. I've been over it a few times but just can't work it out. This is the Chrome console output:

We have this CSS in the head of _Host.cshtml:

<link href="_content/Radzen.Blazor/css/default-base.css" rel="stylesheet" />
<link href="_content/BlazorPro.Spinkit/spinkit.min.css" rel="stylesheet" />

and these scripts at the end of body

<script src="_framework/blazor.server.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

We're using Radzen.Blazor 2.11.14 and BlazorPro.Spinkit 1.2.0 on netcoreapp3.1.

Anyone know what might be causing this?

Thanks for the advice. These are steps I always try. I found the answer to my specific issue and posted here. — Stephen York
– Stephen York, Commented Sep 1, 2020 at 23:55

Stephen York · Accepted Answer · 2020-09-01 23:57:06Z

4

Turns out an incoming change from master had this in launchsettings.json

 "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Local"
      }
    },

I switched local back to development which fixed the issue. We wanted to put AzureDevOps Personal Access Tokens in a git ignored file called appsettings.local.json. I guess that obvious option is out the window.

Anyone know why this breaks the pipeline? The ridiculous part is the entire site works normally without other errors. It just stops nuget packages from loading (at runtime) and gives no message about it. I'm not sure if this is a Blazor, Razor or ASP.NET Core MVC issue.

This coupled with a few other issues I've hit have convinced me that Blazor is incomplete to the point of being unusable for an enterprise project. Is early days for us so a switch to a real SPA platform is being worked into our backlog.

edited Sep 1, 2020 at 23:57

answered Sep 1, 2020 at 23:47

Stephen York

1,4891 gold badge20 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

agua from mars Over a year ago

ASPNETCORE_ENVIRONMENT defines the environment you use and then selects the configuration override file (appsettings.{environment}.json). If you configure your authentication for Azure in appsettings.Development.json and you define Local as environment , Blazor try to load appsettings.Local.json and don't find it.

agua from mars Over a year ago

In your Azure app service define configurations variables you need. This will set environment variables overriding the configuration for your server. However, that doesn't override the appsettings.{environment}.json file loaded by Blazor. But you can create a custom middleware to override the response, or copy a file while deploy

agua from mars Over a year ago

Or you can just set ASPNETCORE_ENVIRONMENT=Local in your Azure app service configuration.

marc_s · Accepted Answer · 2022-10-28 18:47:52Z

I had a similar issue where is switched to a page with a parameter in its URL (e.g. page/customer/$id. When I reloaded the page, all my CSS would disappear. Turns out in _Host.cshtml you need to define <base href="~/" /> before any of your links to stylesheets.

For example (Loads CSS);

<head>
<base href="~/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Does NOT load CSS;

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<base href="~/" />

The base href needs to be defined before anything else.

Hope this helps someone.

Collectives™ on Stack Overflow

Blazor CSS not loading

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related