CODEWITHSUNDEEP
blazorasp.net-core-3.1
Stephen York
Stephen York

Reputation: 1429

Blazor CSS not loading

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: enter image description here

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?

Upvotes: 2

Views: 5633

Answers (2)

Collega
Collega

Reputation: 442

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.

Upvotes: 0

Stephen York
Stephen York

Reputation: 1429

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.

Upvotes: 4

Related Questions