如何在.NET Core Razor Web App中使用Bootswatch主题？

你遇到的问题很典型——因为默认的Razor Pages项目是通过编译LESS源文件生成bootstrap.css的，直接替换CSS文件会被后续的LESS编译操作覆盖，所以才没生效。下面给你两种可行的解决方案，按需选择：

方法一：适配项目的LESS工作流（推荐，保留动态编译能力） #

这种方法会让Bootswatch主题和项目原有的LESS编译流程兼容，方便后续自定义样式：

• 第一步：下载对应Bootswatch主题的LESS版本包。每个Bootswatch主题都提供了variables.less和bootswatch.less两个核心文件。
• 第二步：定位项目中的Bootstrap LESS源文件目录。如果你的项目是用LibMan引入的Bootstrap，路径一般是wwwroot/lib/bootstrap/less；如果是通过NuGet管理，可能在wwwroot/css/lib/bootstrap/less下。
• 第三步：替换并导入主题文件：
  • 把Bootswatch的variables.less替换掉Bootstrap LESS目录里的同名文件（这个文件定义了所有Bootstrap的基础变量，比如颜色、间距）。
  • 打开Bootstrap LESS目录里的bootstrap.less文件，在文件的末尾添加一行：@import "bootswatch.less";——建议把bootswatch.less放在Bootstrap LESS目录里，方便管理。
• 第四步：重新编译LESS。如果你的项目配置了自动编译（比如Visual Studio的Web Compiler扩展，或者项目里的gulp任务），保存文件后会自动生成新的bootstrap.css；如果没有自动编译，你可以用LESS命令行工具手动编译：

  lessc wwwroot/lib/bootstrap/less/bootstrap.less wwwroot/css/bootstrap.css
  

方法二：直接使用Bootswatch的CSS文件（快速简单） #

如果你不想折腾LESS编译，直接用现成的CSS文件也可以，步骤如下：

• 第一步：下载Bootswatch主题的bootstrap.css（和bootstrap.min.css，如果需要生产环境压缩版）。
• 第二步：替换项目中的CSS文件：
  • 把下载的bootstrap.css替换掉wwwroot/css目录下的同名文件。
  • 为了防止LESS编译覆盖新的CSS文件，你需要：
    • 要么删除项目里的bootstrap.less文件（或者重命名为bootstrap.less.backup）；
    • 要么修改项目配置，禁用LESS文件的自动编译：打开项目的.csproj文件，找到类似<Content Include="wwwroot/css/*.less" />或者<Compile Include="wwwroot/css/*.less" />的配置项，删除或者注释掉。
• 第三步：处理map文件（可选）：如果Bootswatch提供了对应的bootstrap.css.map，一起替换进去；如果没有，删掉原来的bootstrap.css.map即可，这只会影响浏览器调试时的LESS源文件映射，不影响主题显示。

最后检查 #

替换完成后，记得按Ctrl+F5强制刷新浏览器（避免缓存旧的CSS），同时确认_Layout.cshtml里的样式引用路径是正确的：

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

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