webpack配置CSS Modules后生成的类名格式异常问题求助

问题核心原因 #

• css-loader 仅配置modules: true未自定义类名生成规则，默认生成规则和你预期的[文件名]-[类名]_[哈希]格式不匹配
• 处理.module.scss的loader链缺少sass-loader，无法编译SCSS语法，也会导致样式加载逻辑异常

修正方案 #

1. 安装缺失依赖 #

如果还未安装sass相关编译工具，先执行安装：

npm install sass sass-loader --save-dev

2. 修改webpack配置 #

调整css-loader的modules配置，自定义类名生成规则，同时补全sass-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1, // 后续有sass-loader1个预处理器时填1，额外加postcss-loader则填2
              modules: {
                // 自定义类名规则，完全匹配你要的格式
                localIdentName: '[name]-[local]_[hash:base64:5]',
                // 如果要去掉文件名里的.module后缀，加下面这行
                localIdentRegExp: /(.+)\.module\.scss$/
              },
            },
          },
          // 补全sass-loader，放在css-loader之后
          "sass-loader"
        ],
        include: /\.module\.scss$/,
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
        exclude: /\.module\.scss$/,
      },
    ],
  },
};

如果你使用的是css-loader v4以下的旧版本，将localIdentName配置放到css-loader的options根目录下即可，无需嵌套在modules对象中。

3. 生效验证 #

重启webpack编译服务，重新打包后即可看到类名符合预期格式。

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