如何在Blazor WebApp中使用SCSS重写Bootstrap 5.3样式？

当然可以在Blazor中自定义Bootstrap的primary颜色，你之前的代码无效是因为导入的是编译完成的Bootstrap CSS文件，而非SCSS源文件，变量覆盖逻辑根本没触发。下面是具体实现步骤：

1. 获取Bootstrap SCSS源文件 #

Blazor自带或NuGet安装的Bootstrap通常只包含编译后的CSS，没有完整SCSS源码。你需要通过以下方式获取：

• 用npm安装：在项目根目录运行 npm install bootstrap，安装完成后在node_modules/bootstrap/scss里能找到所有SCSS源文件。
• 直接从Bootstrap官网下载源码包，解压后取出scss文件夹，放到项目的wwwroot/css目录下。

2. 创建自定义SCSS文件 #

在wwwroot/css下新建custom.scss，写入以下内容：

// 先定义要覆盖的变量
$primary: #080808;

// 导入Bootstrap的SCSS入口文件（不是编译好的css）
// 如果是npm安装的，路径是 '../node_modules/bootstrap/scss/bootstrap.scss'
// 如果是手动放的scss文件夹，路径是 './scss/bootstrap.scss'
@import '../node_modules/bootstrap/scss/bootstrap.scss';

3. 配置SCSS编译为CSS #

你需要把SCSS编译成Blazor能识别的CSS文件，常用三种方式：

• VS扩展：Web Compiler：安装后右键custom.scss选择“Compile File”，会自动生成custom.css，后续修改SCSS会自动重新编译。
• npm脚本：在package.json里添加编译脚本：

  "scripts": {
    "build-css": "sass wwwroot/css/custom.scss wwwroot/css/custom.css",
    "watch-css": "sass --watch wwwroot/css/custom.scss wwwroot/css/custom.css"
  }
  

  运行npm run build-css编译一次，或npm run watch-css实时监听修改。
• Dotnet CLI工具：安装BuildBundlerMinifier NuGet包，配置bundleconfig.json来编译SCSS。

4. 在Blazor项目中引用自定义CSS #

打开项目的入口文件：

• Blazor Server：修改Pages/_Host.cshtml，把原来的<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />替换为<link href="~/css/custom.css" rel="stylesheet" />。
• Blazor WebAssembly：修改wwwroot/index.html，同样替换Bootstrap的CSS引用为你的custom.css。

这样启动项目后，Bootstrap的primary颜色就会变成你定义的#080808了。

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