Next.js项目全局应用Roboto字体仅默认路由生效问题求助

问题核心 #

你的问题出在app目录的根布局未正确覆盖pages路由组件，或字体CSS变量未全局注入，导致登录页无法继承根布局的样式配置。

分步解决方案 #

1. 移除pages目录下的自定义_app.js/_app.tsx #

如果pages目录下存在自定义的_app文件，它会替代app目录的RootLayout成为pages路由的根容器，直接导致全局样式和字体配置失效。删除该文件后，app的根布局会自动包裹所有pages页面。

2. 完善字体变量的全局注入 #

修改app/layout.tsx，将字体变量绑定到html标签，确保CSS变量全局可访问：

import type { Metadata } from "next";
import { Roboto } from "next/font/google";

import "./globals.scss";

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-roboto",
  display: "swap",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

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

3. 确认Sass依赖已安装 #

如果项目未安装sass，globals.scss无法被正确编译，执行以下命令安装：

npm install sass
# 或
yarn add sass

4. 加强全局样式优先级（可选） #

若以上步骤无效，可调整globals.scss的选择器优先级，确保字体样式覆盖局部样式：

html, body, * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-roboto) !important;
}

验证 #

重启开发服务器后访问/login路由，检查按钮字体是否自动应用Roboto，无需手动导入全局样式。

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