如何清理Blazor Server项目？自定义布局及替换Tailwind CSS

一、生成极简项目的命令 #

直接用dotnet new命令创建仅含核心运行结构的Blazor Server项目，跳过所有冗余内容：

dotnet new blazorserver --empty --no-https --no-auth

参数说明：

• --empty：生成无默认布局、无示例页面的基础结构
• --no-https：跳过HTTPS配置，适合本地开发阶段
• --no-auth：移除身份验证相关的所有依赖与代码

二、手动清理现有默认项目的安全步骤 #

如果已创建默认项目，按以下步骤逐步清理，不会导致应用崩溃：

• 删除冗余页面：删掉Pages目录下的Counter.razor、FetchData.razor，保留_Host.cshtml（核心宿主页面）和Error.razor（异常处理页面）
• 移除默认布局：删除Shared目录下的MainLayout.razor、NavMenu.razor
• 清理Bootstrap依赖：
  • 删除wwwroot/css下的bootstrap/文件夹、bootstrap.min.css和open-iconic/目录
  • 打开_Host.cshtml，删除所有Bootstrap相关的<link>和<script>标签
  • 编辑项目文件（.csproj），移除Bootstrap相关的PackageReference（如果存在）
• 精简Program.cs：保留核心代码块，删除身份验证等无关中间件。核心代码如下：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

三、替换为Tailwind CSS的步骤 #

1. 安装Tailwind CLI：在项目根目录执行命令

dotnet tool install -g tailwindcss-cli
tailwindcss init

2. 配置Tailwind扫描范围：编辑自动生成的tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{razor,html,cshtml}"],
  theme: { extend: {} },
  plugins: [],
}

3. 创建Tailwind输入样式文件：在wwwroot/css下新建input.css，写入基础指令

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 配置自动构建：编辑项目文件（.csproj），添加PostBuild事件自动生成压缩后的CSS

<Target Name="TailwindBuild" AfterTargets="Build">
  <Exec Command="tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --minify" />
</Target>

5. 引入Tailwind样式：在_Host.cshtml中替换原Bootstrap引用

<link href="~/css/output.css" rel="stylesheet" />

四、从零构建自定义布局 #

1. 创建布局组件：在Shared目录新建CustomLayout.razor，示例代码：

@inherits LayoutComponentBase

<div class="min-h-screen flex flex-col">
    <!-- 自定义头部 -->
    <header class="bg-indigo-600 text-white py-4 px-6">
        <h2 class="text-xl font-semibold">我的Blazor应用</h2>
    </header>
    <!-- 页面主体内容 -->
    <main class="flex-grow container mx-auto py-6 px-4">
        @Body
    </main>
    <!-- 自定义底部 -->
    <footer class="bg-gray-800 text-white py-3 px-6 text-sm">
        版权所有 © 2024
    </footer>
</div>

2. 全局应用布局：打开_Host.cshtml，在<component>标签中指定全局布局

<component type="typeof(App)" render-mode="ServerPrerendered" param-Layout="typeof(CustomLayout)" />

也可在单个页面中通过@layout CustomLayout指定该页面使用的布局

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