Next.js 使用了错误的全局SCS/CSS

我有一个带有两个“布局”组件的Next.js应用程序：

/layouts/default layout.tsx:

import { Footer } from '../components/footer';
import { Header } from '../components/header';

import './default-layout.scss';

export const DefaultLayout: React.FC = ({ children }) => (
  <div className="d-flex flex-column vh-100">
    <Header className="flex-shrink-0 fixed-top" />
    <main className="flex-shrink-0">
      {children}
    </main>
    <Footer className="mt-auto" />
  </div>
);

import Helmet from 'react-helmet';

import 'bootstrap/scss/bootstrap.scss';
import './profile-layout.scss';

export const ProfileLayout: React.FC = ({ children }) => (
  <div>
    <Helmet
      link={[
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Poppins|Open+Sans|Dancing+Script&display=swap' },
      ]}
    />
    {children}
  </div>
);

从“../components/Footer”导入{Footer}；
从“../components/Header”导入{Header}；
导入“./default layout.scss”；
export const DefaultLayout:React.FC=（{children}）=>(
{儿童}
);

/layouts/profile layout.tsx:

import { Footer } from '../components/footer';
import { Header } from '../components/header';

import './default-layout.scss';

export const DefaultLayout: React.FC = ({ children }) => (
  <div className="d-flex flex-column vh-100">
    <Header className="flex-shrink-0 fixed-top" />
    <main className="flex-shrink-0">
      {children}
    </main>
    <Footer className="mt-auto" />
  </div>
);

import Helmet from 'react-helmet';

import 'bootstrap/scss/bootstrap.scss';
import './profile-layout.scss';

export const ProfileLayout: React.FC = ({ children }) => (
  <div>
    <Helmet
      link={[
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Poppins|Open+Sans|Dancing+Script&display=swap' },
      ]}
    />
    {children}
  </div>
);

从“react Helmet”导入头盔；
导入“bootstrap/scss/bootstrap.scss”；
导入“./profile layout.scss”；
export const ProfileLayout:React.FC=（{children}）=>(
{儿童}
);

两个布局组件都导入一些全局SCSS样式

页面使用一种或另一种布局，如下所示：

const IndexPage: NextPage = () => (
  <DefaultLayout>
    {/* more content here */}
  </DefaultLayout>
);

const IndexPage:NextPage=（）=>(
{/*此处有更多内容*/}
);

大多数页面使用默认布局，但位于/pages/profiles/[id].tsx的我的动态页面使用配置文件布局。在页面之间导航工作正常，每个页面都使用正确的布局和正确的SCSS文件

但是如果我直接在网络浏览器的地址栏中键入一个页面，就会得到不一致的结果。通常使用错误的SCSS文件。在另一个选项卡中打开应用程序并四处导航似乎也会产生效果

---

我如何才能始终如一地加载正确的SCS样式？

您是否能够使用最小的可复制示例或代码沙盒共享回购？