next.js - 使用了错误的全局 SCSS/CSS

Question

我有一个带有两个“布局”组件的 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>
);

/layouts/profile-layout.tsx：

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>
);

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

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

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

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

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

如何始终加载正确的 SCSS 样式？

标签： next.js