当我使用layout.tsx文件在整个根级别更改样式时，它会起作用.
当我在路径级别添加layout.tsx文件时，当我在热重新加载期间进行更改时，更改就会显示出来.
但当我手动刷新页面、停止/启动应用程序或yarn build && yarn start时，样式就不再存在了.为什么？
使用Next js版本:14.2.3.
此位置的布局文件适用于所有页面的样式.
src
app
(main)
page.tsx
(auth)
login
page.tsx
layout.tsx
但当我将其目标定位为如下特定路径时，样式更改仅在热重新加载期间显示一次.
src
app
(main)
page.tsx
(auth)
login
page.tsx
layout.tsx // adding styles here only shows once during hot reload
register
page.tsx
layout.tsx // adding styles here only shows once during hot reload
layout.tsx // adding styles here only shows once during hot reload
layout.tsx // for testing, no styles here now. Will work if I add styles here.
页面非常基本.
这是始终有效的根级别布局文件.
import type { Metadata } from "next";
import { Open_Sans } from "next/font/google";
import "./globals.css";
import React from "react";
const font = Open_Sans({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "App",
description: "App description",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`text-3xl ${font.className}`}>{children}</body>
</html>
);
}
This is the layout that works once only during the first hot reload.
(I've tried copying exact above layout too, same result)
import React from "react";
const AuthLayout = ({
children,
}: { children: React.ReactNode }) => (
<html lang="en">
<body className="bg-amber-400 text-center mt-4">
{children}
</body>
</html>
);
export default AuthLayout
所有页面组件的内容.唯一的区别是组件的名称.
const LoginPage = () => {
return (
<div>
Login
</div>
);
};
export default LoginPage;