背景
Next.js 是一个非常流行的 React 框架，通过服务器端渲染、自动代码分割、静态导出等功能提高了前端应用的性能和用户体验。CSS Module 是一个用于解决 CSS 样式命名冲突的技术方案，通过生成唯一的 CSS 类名，解决了多人协作造成的命名冲突问题。但是，在实际开发中我们会发现，使用 Next.js + CSS Module 很容易出现更新样式无效的情况，本文将介绍如何解决这个问题。
问题
在使用 Next.js + CSS Module 时，我们一般通过在 CSS 文件中定义类名，然后在 React 组件中使用 import styles from './style.module.css' 来加载样式文件，然后在 JSX 中使用 <div className={styles.container}> 来绑定样式。
当我们修改样式文件并保存后，发现样式并没有更新。我们通过查看浏览器控制台的样式文件发现，样式文件版本号并没有更新。这是因为 Next.js + CSS Module 默认使用的是 mini-css-extract-plugin 插件，该插件会将 CSS 文件独立出来并缓存，不会随着文件的修改而更新。
解决方案
1. 修改 Next.js 配置
我们可以在项目的 next.config.js 文件中修改 CSS Module 的配置，将 mini-css-extract-plugin 插件替换成 style-loader 来实现样式的更新。
-- -------------------- ---- -------
----- -------------------- - ----------------------------------
-------------- - -
--------------- - -------- -- -
--------------------------
----- ----------
---- -
-------- - --------------------------- - ---------------
-
------- -------------
-------- -
-------------- --
-------- -
--------------- -------- - ----------------- - ---------------------------
--
--
--
--
--
-- ----------- -
----------------------- ----------------------
--------- ------------------------
-------------- ----------------------
------------ -----
---
-
------ ------
--
-这样，在修改样式文件后，样式文件的版本号会随之改变，样式才会生效。但是，这种方式会影响性能，因为每次修改 CSS 文件后都需要重新加载样式，可能会导致页面闪烁和卡顿。
2. 使用 CSS Hot Loader
为了优化开发体验，我们可以使用 css-hot-loader 插件来实现样式的热更新，同时避免影响性能。
首先，安装 css-hot-loader：
npm install --save-dev css-hot-loader
然后，在 Next.js 配置文件中，修改 CSS Module 的 Loader 配置：
-- -------------------- ---- -------
----- ------------ - -------------------------
-------------- - -
--------------- - -------- -- -
----- -------- - ----------------------------- -- ------ ---------- --- ---------
-- -- --------------
--------------------------- -- -
----- ----------- - -------------------------------------------
-- ------------- -
----- ------- - --------
-------- - -------------------------------------
-
--
------ ------
--
-配置完成后，重新启动开发服务器，在修改样式后，样式会自动更新，无需手动刷新页面。
示例代码
使用 CSS Hot Loader 的示例代码如下：
-- -------------------- ---- -------
-- --------------
----- ------------ - -------------------------
-------------- - -
--------------- - -------- -- -
----- -------- - ----------------------------- -- ------ ---------- --- ---------
--------------------------- -- -
----- ----------- - -------------------------------------------
-- ------------- -
----- ------- - --------
-------- - -------------------------------------
-
--
------ ------
--
--- -------------------- ---- ------- -- ---------------- -- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ ----------- -------- -
-- -------------------- ---- -------
-- --------
------ ------ ---- --------------------
------ ------- -------- ------ -
------ -
--
---- -----------------------------
---------- -------------
------
---
-
-总结
在使用 Next.js + CSS Module 开发时，及时更新样式是我们需要解决的一个问题。通过修改 Next.js 配置或者使用 CSS Hot Loader 插件，可以实现样式的更新和提高开发效率。这个问题虽然看起来简单，但是解决方案却有些技巧，希望本文对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c89c2f5ad90b6d04142ea3