Next.js 中如何使用 CSS 模块化？

在前端开发中，CSS 是一个必不可少的技术。为了方便管理和修改 CSS 样式，现在越来越多的人开始使用 CSS 模块化的方法。在 Next.js 中，使用 CSS 模块化也是非常简单的。本文主要介绍 Next.js 中如何使用 CSS 模块化，并提供示例代码供大家参考。

什么是 CSS 模块化？

CSS 模块化是一种将 CSS 样式拆分成多个模块并隔离作用域的技术。使用 CSS 模块化可以避免全局 CSS 样式冲突的问题，并且方便拆分和管理 CSS 样式。

Next.js 中的 CSS 模块化

在 Next.js 中，可以通过在 CSS 文件名后面添加 .module.css 的后缀来开启 CSS 模块化。例如：

.title {
  color: red;
}

可以改写成如下形式：

.title.module.css {
  color: red;
}

然后在 JavaScript 中导入使用 CSS 样式时，只需要在文件名后面添加 module 的后缀即可，例如：

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

function Title() {
  return <h1 className={styles.title}>Hello, world!</h1>;
}

在上面的示例中，styles.title 表示 title.module.css 中声明的 .title 样式。Next.js 会自动将样式名转换成一个全局唯一的类名，从而避免了全局 CSS 样式冲突的问题。

Next.js 中的全局样式

除了局部样式外，Next.js 还支持全局样式。在 Next.js 中，可以通过在 pages/_app.js 文件中导入全局 CSS 样式，从而在整个应用中生效。例如：

import '../styles/global.css';

export default function MyApp({ Component, pageProps }) {
  // ...
}

在上面的示例中，../styles/global.css 是一个全局 CSS 样式文件。

总结

使用 CSS 模块化可以大大方便 CSS 样式的管理和修改。在 Next.js 中，使用 CSS 模块化也非常简单。通过在 CSS 文件名后面添加 .module.css 后缀即可开启 CSS 模块化，并且 Next.js 会自动将样式名转换成一个全局唯一的类名。而全局样式的使用则可以通过在 pages/_app.js 文件中导入全局 CSS 样式来实现。希望本文对大家学习 Next.js 中的 CSS 模块化有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ae1b6968c7c53b067fcf4