Next13中在SCSS文件使用Next Font变量失效问题求助

问题核心 #

你定义的CSS变量--font-montserrat未被正确注入全局作用域，导致SCSS引用后无法生效。

修复步骤 #

1. 将字体变量挂载到根元素
   在app/layout.tsx中，必须把Next Font生成的variable类名添加到根html标签的className中，确保CSS变量被全局注入：

import { Montserrat } from 'next/font/google';

const montserrat = Montserrat({
  weight: ['400'],
  style: ['normal'],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-montserrat'
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={montserrat.variable}>
      <body>{children}</body>
    </html>
  );
}

2. 正确在SCSS中引用变量
   给font-family设置后备字体（比如sans-serif），避免字体加载失败时显示异常，同时通过SCSS变量中转或直接引用CSS变量：

$font-body: var(--font-montserrat);

body {
  font-family: $font-body, sans-serif;
}

3. 排查样式优先级冲突
   若仍未生效，可通过浏览器开发者工具检查元素样式，确认是否有更高优先级的样式（如行内样式、ID选择器）覆盖了font-family设置。

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