在使用 Next.js 进行前端开发时，我们通常会使用 CSS Modules 作为样式开发的工具。CSS Modules 是一种解决样式命名冲突的方案，它可以让我们在组件之间共用样式而不用担心样式冲突的问题。但是在使用 CSS Modules 时，我们有时会遇到样式找不到的问题。本文将详细介绍如何解决这个问题。
问题描述
在使用 Next.js 和 CSS Modules 进行开发时，你可能会遇到这样的问题：有些组件的样式无法正常加载，而没有 CSS Modules 的组件却可以正常加载。这是因为 Next.js 默认只会将页面级别的 CSS Modules 打包到页面中，而不会将组件级别的 CSS Modules 打包到页面中。造成这种问题的原因是 Next.js 对于组件级别的 CSS Modules 并没有做出直观的支持，需要我们自己手动编写代码来解决。
解决方案
下面介绍两种解决方法，一种是使用 next-compose-plugins 插件来解决，另一种是手动编写 webpack 配置来解决。
方案一：使用 next-compose-plugins 插件
next-compose-plugins 是一个可以简化 Next.js 插件配置的工具，它可以让你轻松地将多个插件组合在一起。使用它来解决样式找不到的问题非常简单，只需要安装 @zeit/next-css 和 @zeit/next-sass 插件，然后在 next.config.js 文件中进行配置即可：
-- -------------------- ---- ------- ----- ----------- - -------------------------------- ----- ------- - -------------------------- ----- -------- - --------------------------- -------------- - ------------- ---------- ----------- -- - ----------- ----- ---
在这个配置中，我们引入了 withCSS 和 withSass，这两个插件用于正确加载 CSS 和 SASS 样式。cssModules 设置为 true，以启用 CSS Modules 功能。
方案二：手动配置 webpack
另一种解决样式找不到问题的方法是手动添加 webpack 配置。在 Next.js 中，默认使用 webpack 来进行文件打包，我们可以在 next.config.js 文件中扩展 webpack 配置，以便正确加载 CSS Modules。
-- -------------------- ---- -------
-- --------------
----- ------- - --------------------------
-------------- - ---------
--------------- - -------- -- -
-- ---------- -
----- --------- - -------------------------
---- -- --------- -- -------------------------------------
--
--------------------- - -----
-
------ -------
--
---在这个配置中，我们使用了 withCSS 插件以确保正确加载 CSS。然后，在 webpack 选项中，我们找到了在服务端运行 webpack 的配置，然后通过设置 ignoreOrder 选项来告诉 webpack 忽略样式的引用顺序。
示例代码
下面是一些使用 CSS Modules 的示例代码，可以帮助你更好地理解如何解决样式找不到的问题：
-- -------------------- ---- -------
------ ------ ---- ----------------------
------ ------- -------- ------------- -
------ -
---- ---------------------------
--- ------------------------------ -----------
-- -------------------------------- -- -- ----- ------- -------
------
--
-这里，我们引入了一个名为 styles.module.css 的 CSS Modules 文件，并使用 styles.wrapper 和 styles.title 类来设置样式。这将确保在使用 Next.js 和 CSS Modules 时，样式能够被正确加载。
总结
在本文中，我们介绍了使用 Next.js 和 CSS Modules 开发时遇到的样式找不到问题，并提供了两种解决方案。无论你是选择使用 next-compose-plugins 还是手动配置 webpack，记得一定要小心地进行调试，确保样式可以被正确加载，避免潜在的样式问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654a01d07d4982a6eb438f12
