如何在使用Turbopack的Next.js项目中修改SCSS类名生成规则（输出格式）

嘿，我来帮你搞定在启用Turbopack的Next.js项目里修改SCSS类名生成规则的问题～

首先得明确：你要是用的是CSS Modules形式的SCSS（文件名带.module.scss后缀），才需要修改类名生成规则；如果是全局SCSS，类名就是你写的原样，不用改。

在Turbopack环境下，不能再用Webpack那套loader配置来改SCSS类名了，得用Next.js官方提供的顶层配置项，具体步骤如下：

1. 打开你的next.config.ts，在nextConfig对象里添加cssModules配置项，这里可以直接定义类名的生成格式：

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

const nextConfig: NextConfig = {
  // 确保启用Turbopack（Next.js 13+默认支持，显式声明更稳妥）
  turbo: true,
  // 核心：修改CSS Modules类名生成规则
  cssModules: {
    // 自定义类名格式，比如"文件名__原始类名___短哈希"
    localIdentName: '[name]__[local]___[hash:base64:5]',
    // 如果你需要更灵活的自定义逻辑（比如根据文件路径生成类名），可以用getLocalIdent函数
    // 注意：Turbopack对这个函数的支持需要Next.js 14及以上版本
    // getLocalIdent: (context, _, localName) => {
    //   // 举个例子：取文件名+原始类名
    //   const fileName = context.resourcePath.split('/').pop()?.replace('.module.scss', '') || '';
    //   return `${fileName}-${localName}`;
    // }
  },
  // 如果你还需要配置SCSS的编译选项（比如全局变量、导入路径），可以加sassOptions
  sassOptions: {
    // 示例：添加全局样式路径，不用每次都写相对路径
    // includePaths: [path.join(__dirname, 'src/styles')],
  },
  webpack: config => {
    // 保留你原有的svgr loader配置
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

const withNextIntl = createNextIntlPlugin('./src/i18n.ts');

export default withNextIntl(nextConfig);

2. 保存配置后重启开发服务器（npm run dev -- --turbo），新的类名生成规则就会生效了。

需要注意的小细节：

• 如果你用的是较旧的Next.js版本（比如13.x早期），Turbopack可能不支持getLocalIdent自定义函数，这时候只能用localIdentName字符串格式来配置。
• 全局SCSS的类名不会受这个配置影响，只有.module.scss文件里的类名才会按规则生成。

备注：内容来源于stack exchange，提问作者Ilya Kruchinin