我目前正在从 NextJs 项目的页面目录迁移到应用程序目录。我已经创建了应用程序目录,为了使用国际化,我使用 next-intl,因此我的文件夹结构如下所示:
app/[locale]/layout.tsx
。我的 styles 文件夹中有 globals.scss (我没有 src 文件夹,所有内容都在项目的根目录中)。由于某种原因,当我在根布局中导入 globals.scss 时,我可以看到它在 .next/static/css 文件夹中正确生成,但根本没有应用 css。
这是我的房间布局:
import '@/styles/globals.scss';
import 'react-credit-cards-2/dist/es/styles-compiled.css';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import { Metadata } from 'next';
import { Providers } from './providers';
interface RootLayoutProps {
children: React.ReactNode;
params: { locale: string };
}
export default function RootLayout({ children, params }: RootLayoutProps) {
return (
<html lang={params.locale}>
<body>
<AntdRegistry>
<Providers locale={params.locale}>{children}</Providers>
</AntdRegistry>
</body>
</html>
);
}
export const metadata: Metadata = {
icons: [{ rel: 'apple-touch-icon', url: '/icons/icon.png' }],
manifest: '/manifest.json',
};
这些是我的提供者:
'use client';
import messagesConfig from '@/lang/config';
import { AuthProvider } from '@/providers/auth.provider';
import GoogleApiProvider from '@/providers/google-api.provider';
import withTheme from '@/theme';
import {
MutationCache,
QueryCache,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query';
import { App, ConfigProvider, message } from 'antd';
import { useState } from 'react';
interface ProvidersProps {
children: React.ReactNode;
locale: string;
}
export function Providers({ children, locale }: ProvidersProps) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
retry: false,
staleTime: 5 * 60 * 1000,
},
},
queryCache: new QueryCache({
onError: (error: any) => {
if (error.response.data.error) {
message.error(error.response?.data.error);
}
},
}),
mutationCache: new MutationCache({
onError: (error: any) => {
if (error.response.data.error) {
message.error(error.response?.data.error);
}
},
}),
})
);
return withTheme(
<App>
<QueryClientProvider client={queryClient}>
<GoogleApiProvider>
<ConfigProvider
locale={messagesConfig[locale].antDesignLocale}
direction={messagesConfig[locale].dir}
>
{children}
</ConfigProvider>
</GoogleApiProvider>
</QueryClientProvider>
</App>
);
}
有人知道这里出了什么问题吗?请注意,我的页面目录已禁用,我更改了其名称,以便仅考虑我的应用程序目录。
我尝试研究 nextjs 的未解决问题,尝试移动布局并更改文件夹结构,尝试一些 next.config 更改,还尝试删除 .next 文件夹以便它再次生成,但没有任何帮助。
有点晚了,但可能是由别名引起的暂停
@/
import "../styles/globals.scss"
或
import "../to-your-styles-folder-path/globals.scss"