Blazor WebAssembly独立项目中本地razor.css文件无法被识别的问题求助
Blazor WebAssembly独立项目中本地razor.css文件无法被识别的问题求助
各位好,我现在在Visual Studio里开发Blazor WebAssembly独立项目,给MainLayout页面加了本地的razor.css文件,但项目好像找不到这个样式文件,样式完全没生效。有没有遇到过同样问题的朋友能给我指点一下?谢谢!
我的MainLayout.razor代码:
<MudLayout> <MudBreakpointProvider> <MudHidden Breakpoint="Breakpoint.Xs" Invert="true"> <MudAppBar Elevation="1" Class="appBar"> <MudToggleIconButton Class="mr-2" @bind-Toggled="@Drawer_Open_Close" Icon="@Icons.Material.Outlined.Menu" Size="Size.Medium" Color="Color.Inherit" title="Отвори менюто" ToggledIcon="@Icons.Material.Outlined.MenuOpen" ToggledColor="@Color.Inherit" /> <MudStack Row="true" AlignItems="AlignItems.Center"> <center> <MudStack AlignItems="AlignItems.Center" Justify="Justify.Center" Row="true"> <MudButton OnClick="@HomePage"> <MudImage Fluid="true" Alt="Tehnology" Src="/Images/IconOnStore.png" Height="45" Width="45" ObjectPosition="ObjectPosition.Center" /> </MudButton> </MudStack> </center> </MudStack> <MudSpacer /> @if (IsAdminLoggedIn) { <MudTooltip Text="Известия"> <MudIconButton Icon="@Icons.Material.Outlined.Notifications" Size="Size.Medium" Color="Color.Dark" /> </MudTooltip> @if (LoggedInAdminName != null) { <MudTooltip Text="Акаунт"> <MudAvatar Color="Color.Dark" Variant="Variant.Outlined"> @GetCapitalLetters(LoggedInAdminName) </MudAvatar> </MudTooltip> } <MudTooltip Text="Изход"> <MudIconButton Class="mr-n3" Icon="@Icons.Material.Outlined.Logout" Variant="Variant.Text" Color="Color.Dark" OnClick="Logout" title="Излизане" /> </MudTooltip> } </MudAppBar> <MudDrawer @bind-Open="Drawer_Open_Close" ClipMode="DrawerClipMode.Always" Elevation="2"> <NavMenu /> </MudDrawer> </MudHidden> <MudHidden Breakpoint="Breakpoint.Sm" Invert="true"> <MudAppBar Elevation="1" Class="appBar"> <MudToggleIconButton Class="mr-2 ml-n3" @bind-Toggled="@Drawer_Open_Close" Icon="@Icons.Material.Outlined.Menu" Color="Color.Inherit" title="Отвори менюто" ToggledIcon="@Icons.Material.Outlined.MenuOpen" ToggledColor="@Color.Inherit" /> <MudStack Row="true" AlignItems="AlignItems.Center"> <center> <MudStack AlignItems="AlignItems.Center" Justify="Justify.Center" Row="true"> <MudButton OnClick="@HomePage"> <MudImage Fluid="true" Alt="Tehnology" Src="/Images/IconOnStore.png" Height="45" Width="45" ObjectPosition="ObjectPosition.Center" /> <MudStack AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween"> <MudText Typo="Typo.h5" Align="Align.Center"> <b> //Logo </b> </MudText> </MudStack> </MudButton> </MudStack> </center> </MudStack> <MudSpacer /> @if (IsAdminLoggedIn) { <MudTooltip Text="Известия"> <MudIconButton Icon="@Icons.Material.Outlined.Notifications" Size="Size.Medium" Color="Color.Dark" /> </MudTooltip> <MudTooltip Text="Акаунт"> <MudChip T="string" Size="Size.Large" Variant="Variant.Outlined" Color="Color.Dark"> <AvatarContent> @if (LoggedInAdminName != null) { <MudAvatar Color="Color.Dark" Variant="Variant.Outlined"> @GetCapitalLetters(LoggedInAdminName) </MudAvatar> } </AvatarContent> <ChildContent> @LoggedInAdminName </ChildContent> </MudChip> </MudTooltip> <MudTooltip Text="Изход"> <MudIconButton Class="mr-n3" Icon="@Icons.Material.Outlined.Logout" Color="Color.Dark" Variant="Variant.Text" OnClick="Logout" /> </MudTooltip> } </MudAppBar> <MudDrawer @bind-Open="Drawer_Open_Close" ClipMode="DrawerClipMode.Always" Elevation="2"> <NavMenu /> </MudDrawer> </MudHidden> <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true"> <MudAppBar Elevation="1" Class="appBar"> <MudToggleIconButton Class="mr-2 ml-n3" @bind-Toggled="@Drawer_Open_Close" Icon="@Icons.Material.Outlined.Menu" Color="Color.Inherit" title="Отвори менюто" ToggledIcon="@Icons.Material.Outlined.MenuOpen" ToggledColor="@Color.Inherit" /> <MudStack Row="true" AlignItems="AlignItems.Center"> <center> <MudStack AlignItems="AlignItems.Center" Justify="Justify.Center" Row="true"> <MudButton OnClick="@HomePage"> <MudImage Fluid="true" Alt="Tehnology" Src="/Images/IconOnStore.png" Height="45" Width="45" ObjectPosition="ObjectPosition.Center" /> <MudStack AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween"> <MudText Typo="Typo.h5" Align="Align.Center"> <b> //Logo </b> </MudText> </MudStack> </MudButton> </MudStack> </center> </MudStack> <MudSpacer /> @if (IsAdminLoggedIn) { <MudTooltip Text="Известия"> <MudIconButton Icon="@Icons.Material.Outlined.Notifications" Size="Size.Medium" Color="Color.Dark" /> </MudTooltip> <MudTooltip Text="Акаунт"> <MudChip T="string" Size="Size.Large" Variant="Variant.Outlined" Color="Color.Dark"> <AvatarContent> @if (LoggedInAdminName != null) { <MudAvatar Color="Color.Dark" Variant="Variant.Outlined"> @GetCapitalLetters(LoggedInAdminName) </MudAvatar> } </AvatarContent> <ChildContent> @LoggedInAdminName </ChildContent> </MudChip> </MudTooltip> <MudTooltip Text="Изход"> <MudButton Style="text-transform:none" Color="Color.Dark" Class="ml-2" StartIcon="@Icons.Material.Outlined.Logout" Variant="Variant.Outlined" OnClick="Logout"> Излизане </MudButton> </MudTooltip> } </MudAppBar> <MudDrawer @bind-Open="Drawer_Open_Close" ClipMode="DrawerClipMode.Always" Elevation="2"> <NavMenu /> </MudDrawer> </MudHidden> </MudBreakpointProvider> <MudMainContent Class="px-4 mainContent"> <CascadingValue Value="event_notify"> @Body </CascadingValue> </MudMainContent> <!-- Долен AppBar (футър) --> <MudAppBar Fixed="true" Elevation="0" Class="footer" Style="bottom: 0; top: unset;"> <MudText Typo="Typo.body1" Class="mx-auto" Color="Color.Dark" Align="Align.Center"> <b> //Footer </b> </MudText> </MudAppBar> </MudLayout>
对应的razor.css代码:
body { } .footer { height: 50px; } /* Или ако искате да стилизирате MudAppBar класа: */ .mud-appbar.footer { height: 50px; background-color: var(--mud-palette-background); border-top: 1px solid var(--mud-palette-lines-default); position: fixed; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } .mainContent { padding-bottom: 70px; min-height: calc(100vh - 120px); }




