next.js - 在 Next.js 中配置 postcss 模块加载器来转换 kebab case 类

Question

似乎您可以配置 webpack 的 css 加载器以将样式表中的类名从 kebab 大小写转换为驼峰大小写(参见此处 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

不幸的是，我最近刚遇到这个问题，还没有找到任何解决方案。