如何在C# Blazor中结合SCSS使用Bootstrap 5.3.3？

1. 安装Node.js #

下载并安装Node.js的LTS版本，安装完成后打开命令行，执行以下命令验证安装：

node -v
npm -v

出现版本号即表示安装成功。

2. 初始化项目的npm环境 #

进入你的Blazor项目根目录，在命令行运行：

npm init -y

该命令会自动生成package.json文件，用于管理前端依赖。

3. 安装Bootstrap与Sass依赖 #

执行命令安装所需包：

npm install bootstrap@5.3.3 sass --save-dev

• bootstrap@5.3.3：指定版本的Bootstrap核心库
• sass：用于将SCSS编译为浏览器可识别的CSS文件

4. 创建自定义SCSS文件 #

在项目的wwwroot/css目录下新建custom.scss文件（若无css目录则手动创建），示例内容如下：

// 覆写Bootstrap默认变量
$primary: #2563eb;       // 自定义主色调
$body-bg: #f8fafc;       // 自定义页面背景色
$border-radius: 0.5rem;  // 自定义圆角大小

// 导入Bootstrap完整SCSS核心代码
@import "../node_modules/bootstrap/scss/bootstrap";

// 可在下方添加你的自定义样式，优先级高于Bootstrap默认样式
.custom-btn {
  padding: 0.75rem 1.5rem;
}

注意：路径需匹配node_modules的实际位置，若项目根目录与wwwroot同级，上述路径生效。

5. 配置SCSS编译脚本 #

打开项目根目录的package.json，修改scripts节点为：

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

• build:css：一次性编译SCSS为压缩后的CSS文件
• watch:css：监听SCSS文件变化，实时自动重新编译

6. 替换项目中的Bootstrap引用 #

• 若为Blazor Server项目：打开Pages/_Layout.cshtml
• 若为Blazor WASM项目：打开wwwroot/index.html

移除原有的Bootstrap CSS引用（如CDN或本地文件），替换为编译后的自定义CSS：

<!-- 移除原有Bootstrap CSS引用 -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> -->

<!-- 替换为自定义编译的CSS -->
<link href="css/custom.css" rel="stylesheet">

如需使用Bootstrap交互组件（如模态框、下拉菜单），保留JS引用（可使用CDN）：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

7. 编译与开发 #

• 一次性编译：在命令行执行npm run build:css，生成custom.css文件
• 开发时自动编译：执行npm run watch:css，修改SCSS文件后会自动更新CSS，无需手动重新编译

额外提示 #

• Bootstrap所有可覆写变量都在node_modules/bootstrap/scss/_variables.scss文件中，可打开查看所有可自定义选项
• 若使用Visual Studio，可通过Task Runner Explorer运行watch:css命令，集成到开发流程中

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