Next.js-全球CSS支持

Next.js 是一个基于 React 的应用框架，可以帮助程序员轻松开发静态网站和服务端渲染应用。它内置了许多功能，其中一个非常有用的功能是全局 CSS 支持。

Next.js 的全局 CSS 支持可以让程序员轻松管理整个应用的样式。程序员可以在应用的根目录下创建一个名为 styles 的文件夹，并在里面创建一个带有 .css 扩展名的样式文件。在 Next.js 中，这将自动启用全站 CSS。

例如，假设你有一个名为 styles/global.css 的 CSS 文件：

body {
  font-family: 'Roboto', sans-serif;
}

然后，只需在 pages/_app.js 文件中导入它：

import '../styles/global.css'

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

export default MyApp

这将确保全局 CSS 应用于您的整个应用程序。

此外，Next.js 还支持 CSS 模块，这使得在 React 组件中封装 CSS 代码更加容易。我们可以将每个样式表都作为独立的 CSS 模块导入，并从组件中引用。样式表将被编译并具有唯一的 class 名称。

例如，假设你有一个名为 components/button.module.css 的 CSS 模块：

.button {
  background-color: #4caf50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
}
.button:hover {
  background-color: #3e8e41;
}

然后，只需导入它并在组件中使用：

import styles from './button.module.css'

function Button() {
  return <button className={styles.button}>Click me!</button>
}

export default Button

这将确保样式表只适用于该组件，并且具有唯一的 class 名称。

总的来说，Next.js 的全局 CSS 支持和 CSS 模块使得样式管理变得更加简单和方便。如果您想进一步了解 Next.js 的 CSS 支持，请查看 官方文档。