.NET 8 Blazor Server应用：不同页面使用不同样式库的实现方法

核心思路 #

.NET 8 Blazor Web App用布局组件替代了原有的_Host.cshtml，我们可以为不同样式库创建独立的布局组件，再给对应页面指定专属布局，实现不同页面加载不同版本的Bootstrap。

步骤1：准备不同版本的Bootstrap资源 #

• 下载Bootstrap 3和Bootstrap 5的CSS、JS文件，分别存入wwwroot的独立目录，比如：
  • Bootstrap 3：wwwroot/lib/bootstrap3/css/bootstrap.min.css、wwwroot/lib/bootstrap3/js/bootstrap.min.js
  • Bootstrap 5：wwwroot/lib/bootstrap5/css/bootstrap.min.css、wwwroot/lib/bootstrap5/js/bootstrap.bundle.min.js
• 也可以直接使用CDN链接替代本地文件，比如Bootstrap 3的CDN：https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css

步骤2：创建专属布局组件 #

在项目中新建两个布局组件，分别引入对应版本的Bootstrap资源：

Bootstrap3Layout.razor

@inherits LayoutComponentBase

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@PageTitle</title>
    <!-- 引入Bootstrap 3样式 -->
    <link rel="stylesheet" href="~/lib/bootstrap3/css/bootstrap.min.css" />
</head>
<body>
    <!-- 页面内容占位符 -->
    @Body

    <!-- 引入Bootstrap 3脚本及Blazor核心脚本 -->
    <script src="~/lib/bootstrap3/js/bootstrap.min.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Bootstrap5Layout.razor

@inherits LayoutComponentBase

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@PageTitle</title>
    <!-- 引入Bootstrap 5样式 -->
    <link rel="stylesheet" href="~/lib/bootstrap5/css/bootstrap.min.css" />
</head>
<body>
    <!-- 页面内容占位符 -->
    @Body

    <!-- 引入Bootstrap 5脚本及Blazor核心脚本 -->
    <script src="~/lib/bootstrap5/js/bootstrap.bundle.min.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

步骤3：给页面指定对应布局 #

在需要使用特定Bootstrap版本的页面顶部，通过@layout指令绑定对应的布局组件：

使用Bootstrap 3的页面（Bs3Page.razor）

@layout Bootstrap3Layout
@page "/bs3-page"

<PageTitle>Bootstrap 3 页面</PageTitle>

<h1 class="text-primary">这是Bootstrap 3样式的页面</h1>
<button class="btn btn-default">BS3 标准按钮</button>

使用Bootstrap 5的页面（Bs5Page.razor）

@layout Bootstrap5Layout
@page "/bs5-page"

<PageTitle>Bootstrap 5 页面</PageTitle>

<h1 class="text-primary">这是Bootstrap 5样式的页面</h1>
<button class="btn btn-primary">BS5 标准按钮</button>

步骤4：设置全局默认布局（可选） #

如果大部分页面使用同一版本的Bootstrap，可以在App.razor中配置默认布局，未指定@layout的页面会自动使用该布局：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Bootstrap5Layout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>页面未找到</PageTitle>
        <LayoutView Layout="@typeof(Bootstrap5Layout)">
            <p role="alert">抱歉，当前地址不存在对应页面。</p>
        </LayoutView>
    </NotFound>
</Router>

关键说明 #

• 每个页面渲染时只会加载对应布局中的资源，不会出现两个Bootstrap版本的样式冲突问题。
• 该方案适用于.NET 8 Blazor Web App的所有渲染模式（静态服务器渲染、交互式服务器渲染、WebAssembly渲染）。

内容的提问来源于stack exchange，提问作者King Lee