title: Configure the postcss module loader in Next.js to convert kebab case classes
body: <p>It seems like you can configure webpack's css loader to convert the classnames in stylesheets from kebab case to camel case (see here <a href="https://github.com/webpack-contrib/css-loader#localsconvention" rel="nofollow noreferrer">https://github.com/webpack-contrib/css-loader#localsconvention</a>)</p>
  
  <p>How can I configure Next.js to achieve this?</p>
  
  <p>I've tried modifying the webpack config like this, but it breaks the app:</p>
  
  <pre><code>module.exports = {
    // Modify webpack config
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) =&gt; {
      config.module.rules.push({
        test: /\.module\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'postcss-loader',
            options: {
              modules: true,
              localsConvention: 'camelCase',
            },
          },
        ],
      })
  
      return config
    },
  }
  </code></pre>