Next.js 12.0.8中next.config.js配置Sass模块化类名哈希规则不生效问题

嗨，我来帮你分析并解决这个问题——你遇到的情况是因为Next.js对CSS模块的配置逻辑和你预期的不一样，直接在sassOptions里加modules配置是不会被识别的。

为什么你的配置没生效？ #

Next.js处理Sass模块时，实际上是通过css-loader来控制类名哈希规则的，而非sass-loader本身的配置。你当前把localIdentName放在sassOptions.modules里，这个配置项并不会被Next.js的内置webpack配置读取，所以自然不会生效，只会沿用默认的[name]__[hash:base64]格式。

另外还要确认：你的Sass文件是不是以.module.scss（或.module.sass）为后缀的？Next.js只有对带.module.后缀的样式文件才会启用CSS模块功能，如果文件名不对，哪怕配置正确也不会触发哈希处理。

正确的配置方式 #

你需要在next.config.js里通过webpack钩子函数，修改css-loader的配置来设置localIdentName。这里给你一个可以直接用的配置示例：

const path = require("path");

module.exports = {
  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
  assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")], // 这个配置是有效的，保留即可
  },
  webpack(config) {
    // 定位到处理Sass模块的规则
    const sassModuleRules = config.module.rules.filter(rule => 
      rule.test?.test('.module.scss') || rule.test?.test('.module.sass')
    );

    sassModuleRules.forEach(rule => {
      rule.oneOf.forEach(loaderChain => {
        // 找到链中的css-loader
        const cssLoader = loaderChain.use.find(use => 
          typeof use.loader === 'string' && use.loader.includes('css-loader')
        );

        if (cssLoader) {
          // 修改css-loader的modules配置，覆盖localIdentName
          cssLoader.options.modules = {
            ...cssLoader.options.modules,
            localIdentName: "[hash:base64:5]",
          };
        }
      });
    });

    return config;
  },
};

配置逻辑说明 #

1. 通过webpack函数拿到Next.js的内置webpack配置
2. 筛选出所有处理.module.scss/.module.sass文件的规则
3. 在每个规则的loader链中找到css-loader，修改它的modules.localIdentName配置
4. 返回修改后的webpack配置

配置完成后，重新启动Next.js项目，你就能看到Sass类名变成你想要的[hash:base64:5]格式了。

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