You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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);
}

我自己试了一些方法但没解决,比如检查了选择器拼写,有没有其他朋友能给点思路?比如Blazor WASM的样式隔离是不是有什么特殊要求?或者和MudBlazor的样式有冲突?

火山引擎 最新活动