NextJS14中CSS变量嵌套声明失效问题及解决方案咨询

核心原因 #

--font-BaiJamjuree 是通过 NextJS localFont 生成的类挂载在 <body> 上的，你声明的嵌套变量（如 --font-h3）作用域未覆盖到该变量的作用范围，或 SCSS 编译时未正确保留 CSS 变量语法。

方案1：将嵌套变量放在 <body> 选择器内部 #

把依赖 --font-BaiJamjuree 的自定义变量，和它放在同一作用域下（body 选择器内），确保变量能被正确解析：

// global.css
body {
  font-family: var(--font-BaiJamjuree);
  // 直接在body内部声明嵌套变量
  --font-h3: 700 24px/32px var(--font-BaiJamjuree);
  --font-body: 400 16px/24px var(--font-BaiJamjuree);
}

// 使用变量
p {
  font: var(--font-body);
}

h3 {
  font: var(--font-h3);
}

方案2：用 SCSS 插值语法处理中转变量 #

如果需要用 SCSS 变量中转 CSS 变量，必须用 #{$变量名} 插值语法，避免 SCSS 编译时破坏 CSS 变量结构：

// global.css
$font-family: var(--font-BaiJamjuree);

body {
  font-family: $font-family;
  // 用插值语法注入SCSS变量
  --font-body: 400 16px/24px #{$font-family};
}

注意事项 #

• 确保变量名拼写一致：浏览器报错 --font-h3 is not defined 时，检查使用处的变量名是否和声明的完全匹配（比如是否误写为 --font-body）。
• 不要直接使用自动生成的哈希变量（如 __font_f1f493）：这类变量是 NextJS 内部生成的，会随构建变化，完全不具备可维护性。

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