在 Next.js 中配置 postcss 模块加载器以转换 kebab 案例类答案

【问题标题】：Configure the postcss module loader in Next.js to convert kebab case classes在 Next.js 中配置 postcss 模块加载器以转换 kebab 案例类
【发布时间】：2022-04-09 09:43:18
【问题描述】：

您似乎可以配置 webpack 的 css 加载器以将样式表中的类名从 kebab case 转换为 camel case（请参阅此处 https://github.com/webpack-contrib/css-loader#localsconvention）

如何配置 Next.js 来实现这一点？

我试过像这样修改 webpack 配置，但它破坏了应用程序：

module.exports = {
  // Modify webpack config
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: /\.module\.css$/i,
      use: [
        'style-loader',
        {
          loader: 'postcss-loader',
          options: {
            modules: true,
            localsConvention: 'camelCase',
          },
        },
      ],
    })

    return config
  },
}

【问题讨论】：

标签： next.js postcss css-modules react-css-modules

【解决方案1】：

我认为这是 Next.js 中的一个实时问题，并且正在进行关于它的讨论（很长一段时间）： CSS modules - converting class names to camelCase automatically #11267

我最近才遇到这个问题，还没有找到任何解决方案，很遗憾。

【讨论】：