在(auth)文件夹新建layout.tsx后，globals.scss样式无法全局应用求助

可能的原因及解决方法 #

1. Next.js路由布局层级限制 #

在App Router中，auth文件夹属于嵌套路由布局，这个layout仅作用于auth路径下的页面，无法覆盖根目录的layout.tsx。如果网站其他页面不在auth路径下，全局样式自然不会生效。

• 解决：若要全局应用样式，需将globals.scss的导入放在**根目录的layout.tsx**中，而非嵌套路由的layout文件内。

2. SCSS文件路径与导入规则错误 #

Next.js中public目录是静态资源目录，不能直接通过import导入样式文件；同时@默认指向src目录（若项目存在src文件夹），你的导入路径@/public/styles/globals.scss不符合规则。

• 解决：将globals.scss移至src/styles目录下，修改导入语句为import '@/styles/globals.scss'。

3. 全局样式加载范围限制 #

Next.js的App Router规定，全局样式只能在根layout.tsx中导入一次，嵌套layout中导入全局样式不会生效，这是框架为避免样式冲突做的限制。

4. Mantine样式优先级干扰 #

Mantine的内置样式可能覆盖全局样式，可通过以下方式验证：

• 给全局样式的关键选择器添加!important（仅临时测试，不推荐长期使用）；
• 确保全局样式导入语句在MantineProvider导入之前（你已满足此条件，但路径错误会导致无效）。

修正后的示例代码 #

根目录layout.tsx（全局生效） #

import '@/styles/globals.scss';
import { MantineProvider } from '@mantine/core';
import { Metadata } from 'next';

export const metadata: Metadata = {
    title: '网站标题',
    description: '网站描述',
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang='en' data-mantine-color-scheme='light'>
            <body>
                <MantineProvider defaultColorScheme='light'>{children}</MantineProvider>
            </body>
        </html>
    );
}

auth文件夹layout.tsx（仅处理嵌套布局） #

import { MantineProvider } from '@mantine/core';
import { Metadata } from 'next';

export const metadata: Metadata = {
    title: 'Login',
    description: 'Login',
};

export default function SecondLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <MantineProvider defaultColorScheme='light'>{children}</MantineProvider>
    );
}

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