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

问题描述

我正在尝试找出如何在 Next.js 中结合使用 Tailwind 和 CSS 模块的良好工作流程，但我遇到了一些关于 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 的人知道如何实现这一点？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-modules tailwind-css webpack webpack webpack