Next.js 中如何使用 CSS Modules？

在前端开发中，CSS Modules 是一个非常流行的技术，可以帮助我们更好地组织样式代码，避免命名冲突和样式污染。在 Next.js 中，使用 CSS Modules 也非常方便。本文将介绍如何在 Next.js 中使用 CSS Modules，并提供一些示例代码和实践经验。

什么是 CSS Modules？

CSS Modules 是一个 CSS 模块化方案，它可以将样式代码和组件代码一起打包，使得每个组件都拥有自己的独立的作用域和命名空间，从而避免了样式冲突和污染。通过使用 CSS Modules，我们可以更好地维护和扩展代码，同时也能提高样式代码的可读性和可维护性。

在 Next.js 中启用 CSS Modules

Next.js 默认支持 CSS Modules，只需要在组件中为样式文件添加 .module.css 后缀就可以启用。例如：

/* styles.module.css */
.text {
  color: red;
}

// components/MyComponent.js
import styles from './styles.module.css';

function MyComponent() {
  return <div className={styles.text}>Hello, world.</div>;
}

在上述代码中，使用 styles.text 来引用样式类，而不是使用全局的样式类名称，这样能够保证样式的独立性。

在 Next.js 中使用全局样式

除了局部样式，我们有时还需要使用全局样式，例如一些公共的样式规则。在 Next.js 中可以通过将这些全局样式定义在 _app.js 文件中来实现，这样这些样式会被应用到所有的页面中。

// pages/_app.js
import '../styles/global.css';

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

在上述代码中，通过引入 global.css 文件来实现全局样式。需要注意的是，由于 _app.js 是所有页面的公共部分，因此全局样式也会被应用到所有的页面中，这也是 CSS Modules 的局部性所无法达到的地方。

在 Next.js 中自定义 CSS Modules 配置

有时候我们需要自定义 CSS Modules 的配置，例如修改样式类的名称生成方式，或者自定义样式模块的文件名后缀等。在 Next.js 中也可以通过编辑 next.config.js 文件来进行这些配置。

// next.config.js
module.exports = {
  cssModules: {
    modules: {
      localIdentName: '[path][name]__[local]___[hash:base64:5]',
    },
    extensions: ['.module.css', '.css'],
  },
};

在上述代码中，我们可以修改样式类名称的生成方式，让它包含组件的路径信息，并且加上一些随机数防止冲突。我们还可以自定义样式模块的文件名后缀，这里添加了 .css 后缀来兼容一些非 CSS Modules 的样式文件。

总结

本文介绍了在 Next.js 中使用 CSS Modules 的方法，包括如何启用局部样式、如何应用全局样式、以及如何自定义 CSS Modules 的配置。CSS Modules 是一个非常有用的技术，它可以帮助我们更好地组织和维护样式代码，避免命名冲突和样式污染。在使用时需要注意局部性和全局性的平衡，以及如何适当地进行自定义配置。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a15b54add4f0e0ff9717a2