React/NextJS中如何移除模块化SCSS的类名文件前缀？

Next.js中CSS模块化的类名生成逻辑由css-loader的localIdentName参数控制，默认规则会包含文件名前缀。要去掉这个前缀，只需自定义webpack配置修改该参数即可：

• 在项目根目录创建或编辑next.config.js文件，添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 遍历所有CSS处理规则，定位模块化SCSS的配置
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test?.test('.scss') && oneOfRule.use) {
            // 修改css-loader的类名生成规则
            oneOfRule.use.forEach(loader => {
              if (loader.loader?.includes('css-loader') && loader.options.modules) {
                loader.options.modules.localIdentName = '[local]_[hash:base64:5]';
              }
            });
          }
        });
      }
    });
    return config;
  },
};

module.exports = nextConfig;

• 保存配置后，重启Next.js开发服务器。

修改完成后，DOM中的类名将从splash_splashContent_3R9Lp变为splashContent_3R9Lp，仅保留原类名和哈希后缀，去掉了文件名前缀。

内容的提问来源于stack exchange，提问作者Connor