Почему файл razor.css не работает в Blazor WebAssembly?CSS

Разбираемся в CSS
Ответить
Anonymous
 Почему файл razor.css не работает в Blazor WebAssembly?

Сообщение Anonymous »


I am following one tutorial and CSS worked for Shared razor pages. First example works fine and does everything it needs, but the second does not load CSS. No color changes or image size.

@inject IProductService ProductService @if(ProductService.Products == null || ProductService.Products.Count == 0) { Loading products... } else {
  • @foreach (var product in ProductService.Products) {

  • Изображение
    @product.Title @product.Description
    $@product.Price }
} @code { protected override async Task OnInitializedAsync() { await ProductService.GetProducts(); } }
CSS FILE

.media-img{ max-height: 200px; max-width: 200px; border-radius: 6px; margin-bottom: 10px; transition: transform .2s; } .media-img:hover{ transform: scale(1.1); } .media{ display:flex; align-items: flex-start; } .media-body{ flex: 1; margin-left: 20px; } media-img-wrapper{ width: 200px; text-align: center; } @media(max-width: 1023.98px) { .media{ flex-direction: column; } media-img-wrapper{ width: 100%; height: auto; } } But when I try to do the same in the Pages folder

@page "/product/{id:int}" @inject IProductService ProductService @if(product == null) { Message } else {
Изображение
@product.Title @product.Description
$@product.Price } @code { private Product? product = null; private string Message = string.Empty; [Parameter] public int Id { get; set; } protected override async Task OnParametersSetAsync() { Message = "Loading Product..."; var result = await ProductService.GetProductAsync(Id); if(!result.Success) { Message = result.Message; } else { product = result.Data; } } } }
I added another CSS file and even tried to add wwwroot/css/app.css

.media-img{ max-height: 500px; max-width: 500px; border-radius: 6px; margin: 0 10px 10px 10px; } .media-img-wrapper { max-width: 500px; max-height: 500px; text-align: center; } @media(max-width: 1023.98px) { .media-img { max-width: 300px; } .media-img-wrapper{ width:100%; height: auto; } } It does not work. The only difference I can spot is that On pages folder files have a green + sign, while in Shared they have a red V. Files difference


Источник: https://stackoverflow.com/questions/741 ... ebassembly
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»