How to change scss classname generation pattern (output format) in Next.js with Turbopack?

Question

I am using latest Next.js and sass (scss) in my project. Here is next.config.ts configuration:

import type { NextConfig } from 'next';
import createNextIntlPlugin from 'next-intl/plugin';

import '~/env';

const nextConfig: NextConfig = {
  webpack: config => {
    // Add svgr loader
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
  images: {
    // https://nextjs.org/docs/pages/api-reference/components/image#devicesizes
    deviceSizes: [360, 430, 576, 768, 992, 1440, 1920],
    // https://nextjs.org/docs/messages/next-image-unconfigured-host
    remotePatterns: [
      // ...
    ],
  },
  // https://sass-lang.com/d/legacy-js-api
  // https://github.com/vercel/next.js/issues/71638#issuecomment-2431137842
  sassOptions: {
    silenceDeprecations: ['legacy-js-api'],
  },
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
};

const withNextIntl = createNextIntlPlugin('./src/shared/config/i18n/request.ts');
export default withNextIntl(nextConfig);

Also I am using Turbopack in development mode.

I am getting this output for generated scss class names...

Container-module-scss-module__5CxIxW__root
Header-module-scss-module__4xIsZW__content

... and I want it to be somewhat like this:

Container-5CxIxW__root
Header-4xIsZW__content

Is it possible to achieve?

I've already tried multiple strategies:

Push new webpack rules for *.scss
Configuring localIdentName
Configuring postcss

BERROT · Accepted Answer · 2025-05-13 10:07:21Z

2

If you disable Turbopack (by running NEXT_USE_TURBOPACK=0 next dev) and use Webpack, you can override the class name generation like this:

webpack(config) {
  const cssRule = config.module.rules.find(
    rule =>
      typeof rule === 'object' &&
      rule !== null &&
      'oneOf' in rule
  );

  if (cssRule && 'oneOf' in cssRule) {
    cssRule.oneOf?.forEach(rule => {
      if (
        rule &&
        typeof rule === 'object' &&
        rule.use &&
        Array.isArray(rule.use)
      ) {
        rule.use.forEach((u: any) => {
          if (
            u.loader?.includes('css-loader') &&
            u.options?.modules
          ) {
            u.options.modules.localIdentName = '[name]-[hash:base64:6]__[local]';
          }
        });
      }
    });
  }

  return config;
}

This gives me class names like:

Container-5CxIxW__root

This customization doesn’t work—Turbopack seems to ignore localIdentName and uses its own internal naming scheme.

answered May 13 at 10:07

BERROT

361 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Senje Sep 15 at 5:14

doesn't work on "next": "15.5.3"

Collectives™ on Stack Overflow

How to change scss classname generation pattern (output format) in Next.js with Turbopack?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related