解决 Next.js 使用 CSS Modules 样式找不到问题

在使用 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 文件中进行配置即可：

// javascriptcn.com 代码示例
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');

module.exports = withPlugins([
  [withCSS],
  [withSass],
], {
  cssModules: true,
});

在这个配置中，我们引入了 withCSS 和 withSass，这两个插件用于正确加载 CSS 和 SASS 样式。cssModules 设置为 true，以启用 CSS Modules 功能。

方案二：手动配置 webpack

另一种解决样式找不到问题的方法是手动添加 webpack 配置。在 Next.js 中，默认使用 webpack 来进行文件打包，我们可以在 next.config.js 文件中扩展 webpack 配置，以便正确加载 CSS Modules。

// javascriptcn.com 代码示例
// next.config.js
const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  webpack(config, { isServer }) {
    if (isServer) {
      const cssLoader = config.module.rules.find(
        rule => rule.test && rule.test.toString().includes('.css')
      );
      cssLoader.ignoreOrder = true;
    }
    return config;
  },
});

在这个配置中，我们使用了 withCSS 插件以确保正确加载 CSS。然后，在 webpack 选项中，我们找到了在服务端运行 webpack 的配置，然后通过设置 ignoreOrder 选项来告诉 webpack 忽略样式的引用顺序。

示例代码

下面是一些使用 CSS Modules 的示例代码，可以帮助你更好地理解如何解决样式找不到的问题：

// javascriptcn.com 代码示例
import styles from './styles.module.css';

export default function MyComponent() {
  return (
    <div className={styles.wrapper}>
      <h1 className={styles.title}>Hello World!</h1>
      <p className={styles.subtitle}>This is my first Next.js app</p>
    </div>
  );
}

这里，我们引入了一个名为 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