如何为Razor Pages生成用户与员工两个独立的CSS隔离捆绑包？

Razor Pages 自带CSS隔离的捆绑功能，编译时会把所有页面的隔离CSS文件打包成一个~/AssemblyName.styles.css文件。

我现在有两类页面的CSS隔离文件：

• 面向普通用户的文件：
  • /Pages/Products/Index.cshtml.css
  • /Pages/Orders/Edit.cshtml.css
  • /Pages/Orders/Create.cshtml.css
• 仅供员工访问的私有页面文件：
  • /Pages/Private/Accounts.cshtml.css
  • /Pages/Private/Administration.cshtml.css
  • /Pages/Private/Dashboard.cshtml.css

目前所有文件都被打包到同一个捆绑包里，我知道可以用第三方编译/压缩工具实现拆分，但更希望用ASP.NET Core的内置方法生成两个独立捆绑包：一个给普通用户，一个给员工。请问该怎么做？

可以通过修改项目的.csproj文件，配置CSS隔离的捆绑分组规则来实现，具体步骤如下：

1. 打开项目的.csproj文件（例如YourProjectName.csproj），添加以下配置代码：

<PropertyGroup>
  <!-- 启用自定义CSS捆绑分组功能 -->
  <ScopedCssBundles>true</ScopedCssBundles>
</PropertyGroup>

<ItemGroup>
  <!-- 将普通用户页面的CSS文件归为"public-styles"分组 -->
  <ScopedCssInclude Include="Pages/Products/**/*.cshtml.css" BundleName="public-styles" />
  <ScopedCssInclude Include="Pages/Orders/**/*.cshtml.css" BundleName="public-styles" />

  <!-- 将员工私有页面的CSS文件归为"private-styles"分组 -->
  <ScopedCssInclude Include="Pages/Private/**/*.cshtml.css" BundleName="private-styles" />
</ItemGroup>

2. 重新编译项目后，会生成两个独立的捆绑包文件：

   • 普通用户专属：~/public-styles.styles.css
   • 员工私有专属：~/private-styles.styles.css

3. 在对应的页面布局文件中引入对应捆绑包即可：

   • 普通用户页面的布局里添加：<link rel="stylesheet" href="~/public-styles.styles.css" asp-append-version="true" />
   • 员工后台页面的布局里添加：<link rel="stylesheet" href="~/private-styles.styles.css" asp-append-version="true" />

注意事项 #

• 该配置适用于ASP.NET Core 6.0及以上版本（你的问题基于7.0版本，完全兼容）
• 若存在未被ScopedCssInclude规则匹配的CSS隔离文件，会默认打包到原有的~/AssemblyName.styles.css中，需确保所有需要分组的文件都被规则覆盖

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