控制 Next.js 应用程序中 CSS 模块的特殊性

Question

我正在尝试找出如何在 Next.js 中将 Tailwind 与 CSS Modules 一起使用的良好工作流程，但我遇到了一些关于 Webpack 插入样式的特异性和顺序的棘手问题。

考虑以下用例：我想创建一个可重用的 Button 组件，其样式可以被实用程序类覆盖。选项 1是提取组件，如Tailwind Docs 中所述：

/* button.jsx */

export const Button = props => <button {...props} className={`btn {props.className}`} />

在我的tailwind.css文件中，我将在@layer指令中添加类名：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn { @apply ... }
}

这很好，因为我可以使用实用程序类覆盖任何按钮样式，因为它们具有更高的特异性。但是，我在这里看到了一些小问题：

• 该类现在是全局的，因此即使我不使用该组件，它也会包含在每个页面中
• 样式和组件不再位于同一位置 - 如果我创建许多这样的类，这可能会变得混乱

选项 2是使用 CSS 模块并应用如下类：

/* button.module.css */

.btn { @apply ...}

/* button.jsx */

import styles from "./button.module.css";

export const Button = props => <button {...props} className={`${styles.btn} {props.className}`} />

这样，CSS 仅在使用组件时加载，并且样式是共存的。这里的问题是在 Next.js 中 CSS Modules 插入在全局 CSS 之后，因此它们具有更高的特异性。这完全有道理，通常我希望我的 CSS 模块能够覆盖全局样式。但是，在这种情况下，我希望将它们插入到我的全局样式之前，以便我可以使用实用程序类覆盖它们。

我认为这应该可以通过调整 Webpack 配置来实现？有没有精通 Webpack 的人知道如何实现这一点？

Answer 1

选择第二个选项，只需添加!到属性即可使其变得重要。

/* button.module.css */

.btn { @apply !mb-0 }