搜索

首页  >  问答  >  正文

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

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

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

P粉461599845P粉461599845357 天前502

全部回复(1)我来回复

  • P粉517475670

    P粉5174756702024-01-01 00:39:15

    在接下来的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;
    }

    更多内容可以在此处

    找到

    回复
    0
  • 取消回复