本文系统解析 SCSS 变量（如 $deepBlue）在 HTML 中无法生效的根本原因：HTML 仅能加载已编译的 CSS，无法解析 .scss 源文件；而 Bootstrap 的 bootstrap.scss 是入口文件，需配合正确导入链和现代 @use 模块系统才能使自定义变量生效。
本文系统解析 scss 变量（如 `$deepblue`）在 html 中无法生效的根本原因：html 仅能加载已编译的 css，无法解析 `.scss` 源文件；而 bootstrap 的 `bootstrap.scss` 是入口文件，需配合正确导入链和现代 `@use` 模块系统才能使自定义变量生效。
你在 HTML 中直接 <link href="./node_modules/bootstrap/scss/bootstrap.scss"> 是根本性错误——浏览器无法识别 .scss 文件，它只会静默忽略该链接，导致所有 SCSS 逻辑（包括变量、@import、@use）完全不执行。你看到的样式，实际来自 Bootstrap 官方预编译的 bootstrap.css（或你本地误存的旧版 CSS），而非你的自定义 SCSS。
✅ 正确流程：编译优先，变量驱动
SCSS 变量（如 $deepBlue: #032f3e;）只存在于编译阶段，必须通过构建工具（Vite、Webpack、Dart Sass CLI 等）提前编译为纯 CSS 后，再由 HTML 引入：
<!-- ✅ 正确：引入已编译的 CSS --> <link rel="stylesheet" href="./dist/custom.css">
而你的 custom.scss 必须按 Bootstrap 官方推荐结构组织，关键在顺序与模块化：
// custom.scss —— 唯一应被编译的入口文件
// 1. 首先覆盖 Bootstrap 默认变量（必须在 @use bootstrap 前！）
$enable-grid-classes: false;
$enable-cssgrid: true;
$deepBlue: #032f3e;
// 2. 使用 @use（非 @import）导入 Bootstrap，并传入自定义变量
@use "node_modules/bootstrap/scss/functions";
@use "node_modules/bootstrap/scss/variables" with (
$body-bg: $deepBlue, // 覆盖 --bs-body-bg 对应的 Sass 变量
$font-family-sans-serif: "Space Grotesk", sans-serif
);
@use "node_modules/bootstrap/scss/maps";
@use "node_modules/bootstrap/scss/mixins";
@use "node_modules/bootstrap/scss/root"; // 这里会生成 :root { --bs-body-bg: #032f3e; }
@use "node_modules/bootstrap/scss/reboot";
@use "node_modules/bootstrap/scss/type";
// ... 按需导入其他模块（避免全量加载）
// 3. 自定义样式（可安全使用 $deepBlue）
body {
background-color: $deepBlue; // ✅ 编译后为 background-color: #032f3e;
}⚠️ 注意：Bootstrap 5.3+ 强制要求
@use。若仍用@import "../node_modules/bootstrap/scss/bootstrap"，Dart Sass ≥1.70 会报Undefined variable——因为@import已被弃用，变量不再全局注入。立即学习“前端免费学习笔记（深入）”；
? 构建配置示例（以 Vite 为例）
确保 vite.config.ts 正确配置 SCSS 预处理器，并禁止在 HTML 中重复引用 .scss：
// vite.config.ts
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
// 将自定义变量全局注入每个 <style lang="scss"> 块
additionalData: '@use "@/styles/custom.scss" as *;'
}
}
}
})同时，在项目中删除所有对 .scss 文件的 <link> 标签——它们无效且易引发混淆。
? 关于 CSS 自定义属性（--bs-*）与 Sass 变量的协同
你观察到 --bs-body-bg: orange 生效，是因为这是原生 CSS 变量，浏览器可直接读取。但它的值应由 Sass 控制生成：
// 在 custom.scss 中
:root {
--bs-body-bg: #{$deepBlue}; // ✅ 插值语法：#{} 将 Sass 变量转为 CSS 字符串
}切记：--bs-body-bg: $deepBlue 是非法 CSS，必须插值；而 background-color: $deepBlue 是合法 Sass，编译后自动转为颜色值。
? 总结：三步排除变量失效
-
检查 HTML：只保留
<link href=".../custom.css">，彻底移除所有.scss链接； -
验证编译入口：确保
custom.scss是唯一被构建工具处理的文件，且@use顺序正确（变量覆盖 → Bootstrap 模块 → 自定义样式）； -
升级依赖：卸载废弃的
node-sass，安装sass（Dart Sass）：pnpm remove node-sass && pnpm add -D sass
遵循此方案，$deepBlue 不仅可用于 background-color，还能无缝驱动整个 Bootstrap 主题系统——这才是 SCSS 模块化变量管理的正确实践。
