为什么当我在 Next.js 中刷新页面时我的 CSS 样式消失了？

Question

我在应用程序文件夹中创建了一个 CSS 文件夹，并在其中写入了 CSS 文件。然后将它们导入到组件中使用。它们在第一次加载时应用。但是当我刷新页面时，它们都消失了。

我尝试返回并再次保存这些文件，它有效，但每次我再次刷新时都会消失。

Answer 1

接下来的js无法在每个单页面组件中加载css。只能在里面加载 pages/_app.js

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

如果需要在单个组件内部调用，它们应该是 CSS 模块。

例如：components/layout.js

import styles from './layout.module.css';

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

在 components/layout.module.css

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

更多可以在这里找到