Next.js中SCSS模块生成类名含变量名问题求助

直接修改webpack中css-loader的配置就能解决这个问题，以下是两种可行方案：

方案一：自定义类名生成函数 #

在处理.module.scss的loader规则里，给css-loader加上getLocalIdent函数，完全自定义类名格式：

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                getLocalIdent: (context, _, localName) => {
                  // 生成「本地类名+短哈希」的格式，彻底去掉文件名前缀
                  const hash = require('crypto')
                    .createHash('md5')
                    .update(context.resourcePath + localName)
                    .digest('base64')
                    .substr(0, 5);
                  return `${localName}__${hash}`;
                }
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};

方案二：简化配置（直接去掉[name]） #

如果不需要复杂的自定义逻辑，直接修改localIdentName，删掉默认的[name]_部分即可：

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]__[hash:base64:5]'
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};

配置完成后重新打包，生成的类名就会变成wrapper__Y5YAC，和使用纯CSS模块时的效果一致。

你遇到的SCSS和CSS模块类名差异，大概率是webpack配置中两者的localIdentName设置不一致，统一配置后就能消除这个区别。

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