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

Question

似乎您可以配置webpack的css加载器，将样式表中的类名从kebab大小写转换为camel大小写（请参见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
  },
}

Answer 1

我认为这是Next.js中的实时问题，并且对此进行了长时间的讨论： CSS modules - converting class names to camelCase automatically #11267

不幸的是，我最近才遇到此问题，但尚未找到任何解决方案。