在Next.js中将CSS模块的kebab-case类名转换为camelCase

完全可行，Next.js 内置的 CSS 模块处理逻辑会自动将 kebab-case 格式的类名转换为驼峰式（camelCase）的属性，你不需要额外配置就能直接用styles.memberBtn的方式调用。

具体用法示例 #

• 你的 SCSS 模块文件（比如Button.module.scss）保持 kebab-case 命名：

.member-btn {
    background: #fff;
}

• 在组件中直接通过驼峰式属性访问：

import styles from './Button.module.scss';
import Button from './Button';

export default function MemberButton() {
  return (
    <Button className={styles.memberBtn}>Hello world</Button>
  );
}

IDE 提示支持 #

只要正确导入 CSS 模块文件，主流 IDE（如 VS Code）会自动识别生成的属性映射，即使是 JavaScript 项目，也能通过智能感知提供styles.memberBtn的代码补全。

特殊情况说明 #

如果曾手动修改过 Next.js 的 webpack 配置，调整了css-loader的modules.exportLocalsConvention选项，需确保该值设置为camelCase或camelCaseOnly（这也是 Next.js 的默认配置），否则可能无法正常转换。未修改过配置的话，直接使用即可。

内容的提问来源于stack exchange，提问作者JakobAttk