CSS Next.js 全局CSS只能从自定义文件中导入，无法从其他文件中导入

在本文中，我们将介绍Next.js中全局CSS的导入问题。在Next.js应用程序中，全局CSS样式只能从自定义的文件中导入，而无法从其他文件中导入。

阅读更多：CSS 教程

Next.js中的全局CSS

Next.js是一个基于React的服务器端渲染框架，它提供了一种简单而强大的方式来构建面向用户的Web应用程序。在Next.js中，我们可以使用CSS样式来设计和美化页面。一般来说，我们可以将CSS文件导入到组件中，然后在组件中使用这些样式。然而，Next.js对于全局CSS有一些特殊的处理方式。

全局CSS的导入限制

在Next.js中，全局CSS样式的导入是受到限制的。Next.js只允许从自定义的文件中导入全局CSS样式，而无法从其他文件中导入。这是因为Next.js需要确保全局CSS样式在不同页面之间的共享和一致性。

下面是一个示例，展示了如何在<app.js>文件中导入全局CSS样式：

// app.js
import '../styles/global.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

在上面的代码中，我们可以看到全局CSS样式文件global.css被导入到了app.js文件中。这样，global.css文件中的样式规则可以在整个应用程序中生效。需要注意的是，其他组件中的CSS样式将不会全局生效，除非这些样式被导入到global.css文件中。

示例解释

为了更好地理解Next.js中全局CSS的导入限制，我们来看一个示例。假设我们有一个Header组件和一个Footer组件，我们希望在这些组件内部使用全局CSS样式。

首先，我们创建一个header.module.css文件，定义了Header组件的样式：

/* header.module.css */
.header {
  background-color: #f2f2f2;
  padding: 10px;
}

然后，在Header组件中导入该样式：

// Header.jsx
import styles from './header.module.css'

function Header() {
  return <header className={styles.header}>This is the header</header>
}

export default Header

在上述代码中，我们使用了CSS模块化来导入header.module.css文件中的样式，并将其应用于header元素。

接下来，我们创建一个footer.module.scss文件，定义了Footer组件的样式：

/* footer.module.scss */
.footer {
  background-color: #f2f2f2;
  padding: 10px;
}

然后，在Footer组件中导入该样式：

// Footer.jsx
import styles from './footer.module.scss'

function Footer() {
  return <footer className={styles.footer}>This is the footer</footer>
}

export default Footer

同样，我们使用CSS模块化来导入footer.module.scss文件中的样式，并将其应用于footer元素。

最后，我们在页面的index.js文件中使用这两个组件：

// index.js
import Header from '../components/Header'
import Footer from '../components/Footer'

function Home() {
  return (
    <div>
      <Header />
      <h1>Welcome to my website</h1>
      <p>This is the homepage</p>
      <Footer />
    </div>
  )
}

export default Home

在上述代码中，我们导入了Header和Footer组件，并在页面中使用它们。

通过上述示例，我们可以看到，Header和Footer组件中的样式只在组件内部生效，并不会对全局产生影响。如果我们希望某些样式在应用程序的每个页面中都生效，我们应该将这些样式导入到global.css文件中。