Why Blazor CSS isolation not adding the link tag to load the bundled css file?

Question

I created a Blazor component and an accompanying css file for the css isolation functionality in the WASM project. When the page is rendered, my element is not getting the css style defined in the css file. Upon inspecting the element, I can see the extra b-* attribute applied to it. I can see a MyProject.Client.styles.css file with the extra b-* added in the css file under ...\obj\Debug\net5.0\scopedcss\bundle\MyProject.Client.styles.css. (* is some random characters)

However, I expected that the Blazor build would add a link tag in the Head section so the browser loads this new bundled css file but it's not there. I used Fiddler and verified that no *.styles.css is being loaded by the browser, which is the problem. Already cleared the cache and application.

Am I missing some manual step or a setting for css isolation to add the link tag? I am using .NET 5.0 release version.

Answer 1

I was facing very similar problem in my Blazor Server project based on .NET 6 where I leveraged the MudBlazor component library. I had to dive a little deeper than the accepted answer.

One of my pages required some tweaks for conditional background colors in a table and I was not able to have my classes from the isolated CSS file applied. After few hours of research on the internet and experimenting with shifting my custom CSS classes from the isolated CSS file to wwwroot\css\styles.css in my project folder structure and various placements of the stylesheet link for CSS isolation

<link href="<MyAssemblyName>.styles.css" rel="stylesheet"/>

it turned out that the CSS isolation applies only to plain HTML, not to Razor components, tag helpers etc. As stated in the MSDN documentation:

Important: Scoped CSS only applies to HTML elements and not to Razor components or Tag Helpers, including elements with a Tag Helper applied, such as <input asp-for="..." />.

The MudBlazor components surely are Razor components and therefore the scoped CSS feature is not supported. I had to keep my custom CSS classes in the wwwroot\css\styles.css stylesheet. With that I was able to achieve the look I needed on my pages/components.

In case you really need your scoped CSS applied you may try the workaround with the ::deep described here.

Answer 2

I'll assume the indicator is a Sprite with whatever icon you want to show.

By the way, you are going to need a reference to the Camera2D. Unlike in 3D where you can ask Godot for the current Camera, you will have to handle references to the current Camera2D yourself.

I'll assume you already have the reference to the Camera2D (perhaps you have the code in the Camera2D script) and the reference to the indicator Sprite (which is another possible place to have the code).

I'll also assume you don't have a rotated Camera2D.

---

First we need the center of the screen:

var center := camera.get_camera_screen_center()

Then we can get the vector to the position we want:

var vec := target - center

Where target is the position in global coordinates you want to point to. By the way, if vec is Vector2.ZERO, then the target at the center of the screen.

Let us clamp it by the size of the Viewport. We are going to use half the size since we are measuring from the center of the screen. I'll also add a margin, I'll come back to that, for now, assume margin = Vector2.ZERO.

var helf_size := (get_viewport().size - margin) * 0.5
var clamped_vec := Vector2 (
        clamp(vec.x, -half_size.x, half_size.x),
        clamp(vec.y, -half_size.y, half_size.x)
    )

If those are equal, it means the target is on the screen (it didn't need to be clamped):

if clamped_vec == vec:
    # target on screen
    pass
else:
    # target out of screen
    pass

---

Now, to place the indicator we need two things: a rotation and a position, correct?

The rotation is easy. It is the angle of our vec:

sprite.global_rotation = vec.angle()

And for the position, well, it will be our clamped_vec except we need to place the indicator. So we need to add a... Margin! Aha! So, adjust the margin to the size of the indicator you have, and clampled_vec will give us the position, we just need to add center back:

sprite.global_position = clamped_vec + center

And that should do it.