对于前端开发人员而言，CSS Modules已经成为一个非常流行的技术，它可以帮助我们更好的组织和管理CSS代码，防止样式冲突，提高代码可维护性。而在Next.js框架中，使用CSS Modules也十分简单。
什么是CSS Modules
如果你还不了解CSS Modules是什么，这里简单介绍一下。CSS Modules是一种CSS的模块化解决方案，可以将一个CSS文件中的作用域限制在一个模块内部，避免了全局污染和样式冲突的问题。在使用CSS Modules时，我们需要为每个模块指定一个唯一的className，这样在样式中使用该className即可，而不需要担心这个className会被其他模块重复使用。
在Next.js中使用CSS Modules
在Next.js中，使用CSS Modules也非常简单。我们只需要在CSS文件名中添加.module.css后缀，Next.js就会将其识别为一个CSS Modules文件，并自动生成唯一的className。
接下来，我们演示一下如何在Next.js中使用CSS Modules。
第一步，安装依赖：
npm install --save @zeit/next-css
第二步，在next.config.js中配置CSS Modules：
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssModules: true
})第三步，创建一个CSS Modules文件：
-- -------------------- ---- ------- -- ----------------- -- ---------- - ------ ----- ------- - ----- - ------ - ---------- ----- ------ ----- -
第四步，在组件中引用CSS Modules：
-- -------------------- ---- -------
------ ------ ---- ---------------------
-------- ------------- -
------ -
---- -----------------------------
--- ------------------------------ -----------
------
-
-
------ ------- -----------这个例子中，我们创建了一个CSS Modules文件styles.module.css，并定义了两个样式类.container和.title。在组件中通过import导入样式，并使用styles.xxx的方式来指定要使用的样式类名，而不是使用通常的简单类名。这样，Next.js就会自动将样式编译成唯一的className，并插入到DOM中。
总结
通过这篇文章，你了解了如何在Next.js中使用CSS Modules，并了解了CSS Modules的基本原理和优点。使用CSS Modules可以帮助我们更好的组织和管理CSS代码，避免了样式冲突的问题，提高代码可维护性。在实际开发中，你可以根据自己的需要和习惯使用CSS Modules，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64564f9f968c7c53b09809a6