4

I have created a Cart.razor.css file that is a child in the directory Cart.razor. As I understand, this is what is known as a scoped CSS file within Razor. I have read the Documentation here and as far as I can see the CSS (Cart.razor.css) file should be automatically included and be usable from within the parent (Cart.razor) file. However in my example it is not.

Here is an image of the file directory

The Problem here is that no matter what I do. The CSS contained within the scoped CSS file will not be executed.

Here is some of the Cart.razor file that displays the attempt to utilize the custom CSS. Notice "btn-delete".

<button class="btn-delete" @onclick="@(() => DeleteItem(item))">

Here is the some of the Cart.razor.css file.

.btn-delete{
    background: none;
    border: none;
    padding: 0px;
    color: red;
    font-size: 12px;
}

.btn-delete:hover{
    text-decoration: underline;
}

Here is an image of the result

As you can see the button is clearly not red or borderless.

My questions are:

  • Do I need to somehow include the CSS sheet within the razor file?
  • Does it have something to do with the fact that I'm using Rider not Visual Studio?
IntrepidShape
  • 67
  • 1
  • 5
  • The Keybind does not work for me, What is it support to trigger within the IDE? – IntrepidShape Sep 06 '21 at 07:35
  • you said the directory is Car.razor and the css Cart.razor.css. Was it a misunderstanding? – Henrique Pombo Sep 06 '21 at 08:01
  • In the picture https://i.stack.imgur.com/MZmtb.png – IntrepidShape Sep 06 '21 at 10:54
  • I can't reproduce your problem. I Created a `WebAssembly project` from scratch; added a `counter.razor.css` file; added your `css` and the `button` element to the `counter.razor` file. It all worked. Can you do the same please? If it still doesn't work, maybe try it on VS just to clear the hypothesis, even though I doubt such a major flaw wouldn't have been solved already (I don't use Rider). – Henrique Pombo Sep 06 '21 at 11:56
  • A few things to check: (1) you are using .NET 5 or 6 ? (2) what is the _rendered_ HTML of your button (on the browser). It should be something like this: ``. The `b-xxghqgvycs` is the selector tag – Quango Sep 06 '21 at 13:33

5 Answers5

3

Check your index.html (for Webassembly) or _Host.cshtml (for Server) if you have added the stylesheet reference in the head section:

<head>
...
    <link href="<applicationName>.Client.styles.css" rel="stylesheet" />
</head>

this file will be composed with all yours CSS isolation files.

After that, I've tested your code and the result is:
Test Delete button

Two other possible issue to check:

  1. in case you have upgraded the project, check your Project.Client.csproj and remove the line <RazorLangVersion>3.0</RazorLangVersion> from the <PropertyGroup>
  2. check if the ASPNETCORE_ENVIRONMENT system variable is set to Development
Nicola Biada
  • 2,325
  • 1
  • 8
  • 22
  • I checked the index.html client side and it already contains that exact line. With the a appropriate application name. There is one peculiarity, it is underlined and within the context actions it asks me if I would like to create the file. Is .Client.styles.css used internally without an actual file existing or is there supposed to be a file at the location .Client.styles.css? – IntrepidShape Sep 06 '21 at 07:39
  • The _underline_ warning message is not a problem: the file will be created at runtime – Nicola Biada Sep 06 '21 at 14:24
  • Have you checked is there's any problem in your browser dev tools ? – Nicola Biada Sep 06 '21 at 14:25
  • Look at my answer, I've added some other checks todo – Nicola Biada Sep 06 '21 at 14:36
  • "ASPNETCORE_ENVIRONMENT": "Development" – IntrepidShape Sep 06 '21 at 15:54
  • 2
    This tip worked for me, but I needed to add the project name without "Client" to the index.html header section for the WebAssembly version. – PhiseySt Feb 09 '23 at 04:30
3

I found the browser was caching the old css and not noticing the change caused by the new scoped css file. Doing a Ctrl F5 reload in the browser loaded the expected css.

Brett Manners
  • 230
  • 1
  • 12
  • 1
    Thanks for that, probably saved me hours of pain. God I have web development :D – Julien Debache Mar 19 '23 at 20:05
  • This was it for me as well. This is a frustrating scenario, but setting VS to not use cache when debugging, might help with alleviating unexpected results: https://stackoverflow.com/questions/49541177/visual-studio-2017-debugging-disable-browser-cache – Divan Aug 15 '23 at 18:05
1

Based on Nicola's answer, If you only have a WebAssembly project, you need <AppName>.styles.css to be imported in index.html.

Lily Remigia
  • 41
  • 1
  • 5
  • This tip worked for me, the project name without the 'Client' in the head section index.html for WebAssembly version. – PhiseySt Feb 09 '23 at 04:27
0

I changed the name of my project and forgot to change it in the <link ... /> line. Updating that fixed it in my case.

David Thielen
  • 28,723
  • 34
  • 119
  • 193
0

For .Net7 Blazor, you need to specify the app name explicitly (the wildcards , , etc no longer works, apparently). In the index.html file you would put something like this in:

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

This coupled with clearing the cache everytime (or setting the browser to always clear the cache) will work 100% of the time.

MC9000
  • 2,076
  • 7
  • 45
  • 80