为什么 NextJs app dir 全局 css 从页面迁移到应用程序后没有应用?

问题描述 投票:0回答:1

我目前正在从 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 文件夹以便它再次生成,但没有任何帮助。

reactjs next.js sass tailwind-css
1个回答
0
投票

有点晚了,但可能是由别名引起的暂停

@/

尝试像这样导入它

import "../styles/globals.scss"

import "../to-your-styles-folder-path/globals.scss"
© www.soinside.com 2019 - 2024. All rights reserved.