CODEWITHSUNDEEP
next.jspostcsscss-modulesreact-css-modules
bravokiloecho
bravokiloecho

Reputation: 1473

Configure the postcss module loader in Next.js to convert kebab case classes

It seems like you can configure webpack's css loader to convert the classnames in stylesheets from kebab case to camel case (see here https://github.com/webpack-contrib/css-loader#localsconvention)

How can I configure Next.js to achieve this?

I've tried modifying the webpack config like this, but it breaks the app:

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
  },
}

Upvotes: 3

Views: 3051

Answers (1)

Sas Sam
Sas Sam

Reputation: 691

I think it's a live issue in Next.js and there is an ongoing discussion about it (for a long time): CSS modules - converting class names to camelCase automatically #11267

I've just run into this issue recently and didn't find any solutions yet, unfortunately.

Upvotes: 1

Related Questions