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样式？

使用了错误的全局SCSS / CSS

0 个答案: