在前端开发中，CSS Modules 是一个很强大的技术，它可以让我们的 CSS 代码更具可维护性和可重用性。而在使用 Next.js 进行开发时，如何使用 CSS Modules 呢？在这篇文章中，我们会给大家详细介绍。
什么是 CSS Modules？
CSS Modules 是一种将 CSS 样式表文件的作用域限制在组件作用域内的技术。它可以保证不同组件之间的样式表不会相互干扰，而且还可以让我们在 CSS 中使用 JavaScript 的模块机制，使得组件化的开发更为完善。
Next.js 中如何使用 CSS Modules？
下面是使用 Next.js 开发的一个基本结构，其中 pages 目录是存放页面的目录，它是 Next.js 的重要特点之一。
pages/ ---- index.js ---- about.js ---- ...
为了在页面中使用 CSS Modules，我们需要安装一个插件 @zeit/next-css，安装命令如下：
npm install @zeit/next-css
安装完成后，我们需要在项目根目录下创建一个配置文件 next.config.js，在其中配置使用 CSS Modules。代码如下：
const withCss = require('@zeit/next-css')
module.exports = withCss({
/* config options here */
cssModules: true // 开启 CSS Modules
})这样，以 .module.css 为后缀的 CSS 文件就可以处于 CSS Modules 模式，而不同于全局应用。所以，你需要将所有要使用的样式文件重命名，并在文件名后添加 .module 后缀。例如，将 style.css 改为 style.module.css。使用方式如下：
import styles from './style.module.css'
function Component(){
return <div className={styles.container}>...</div>
}在上述代码中，styles.container 表示 style.module.css 文件中定义的 .container 类名称。
示例代码
下面是一个示例代码，通过这个例子，您可以更好地了解如何在 Next.js 中使用 CSS Modules。
-- -------------------- ---- -------
-- --------------
------ ------ ---- --------------------
-------- ------ -
------ -
---- -----------------------------
--- -------------------------------- -- -------------
-- -------------------------------
--- ------- -- ------- ----- ---------------------------------------------
----
---- ------------------------
-- -------- ------------------------
----------------- -----------
------- -------- ----------- ----- ------- -------- --- --------
----
-- -------- ------------------------
--------- -----------
-------- ----- ------- -- -- ----------- ------ ---- ------------
----
-- -------- ------------------------
------------ -----------
----------- --- ------ ----------- ------- ------- -------------
----
-- -------- ------------------------
---------- -----------
------------ ------ ---- ------- ---- -- - ------ --- ---- -----------
----
------
------
-
-
------ ------- ------ -------------------- ---- ------- -- ---------------------- -- ---------- - ----------- ------ -------- - ------- -------- ----- --------------- ------- ---------------- ------- ------------ ------- - ------------ - ------------ ---- ---------- ------- ----------- ------- - ----- - -------- ----- ------------ ------- ---------------- ------- ---------- ----- ---------- ------ ----------- ----- - ----- - ------- ----- ----------- ---- -------- ------- ----------- ----- ------ -------- ---------------- ----- ------- --- ----- -------- -------------- ----- ----------- ----- ----- ----- ------------ ----- ----- - ------------ ------------ ------------ - ------ -------- ------------- -------- - ----- -- - ------- - - ---- -- ---------- ------- - ----- - - ------- -- ---------- -------- ------------ ---- -
总结
在使用 Next.js 进行开发时，使用 CSS Modules 技术可以使页面中的样式表文件更具有可维护性和可重用性，而且在 Next.js 中使用 CSS Modules 技术也十分方便，只需要使用 @zeit/next-css 插件就可以了。希望您在开发过程中可以灵活运用 CSS Modules 应用于项目当中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f597fef6b2d6eab3e5e9ac