Webpack 5搭配css-loader7.1.1启用CSS Modules时样式为undefined的解决求助

问题根源 #

css-loader从v6版本开始，不再默认启用CSS Modules，之前v5及更早版本会自动识别.module.css后缀并启用模块功能，v6+必须通过显式配置开启。

解决方案 #

修改webpack.config.js中的CSS规则，拆分普通CSS和CSS Modules文件的处理逻辑，对.module.css文件单独配置启用Modules：

修改后的module.rules部分代码如下：

module: {
    rules: [
        // ... 保留原有JS/JSX、资源文件规则
        // 处理普通CSS文件（非Modules）
        {
            test: /\.css$/i,
            exclude: /\.module\.css$/i,
            use: [stylesHandler, 'css-loader'],
        },
        // 处理CSS Modules文件
        {
            test: /\.module\.css$/i,
            use: [
                stylesHandler,
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            // 开发环境用可读性高的类名，生产环境用哈希压缩
                            localIdentName: isProduction ? '[hash:base64]' : '[name]__[local]--[hash:base64:5]'
                        }
                    }
                }
            ],
        },
        // ... 其他规则保持不变
    ],
},

关键说明 #

• 拆分规则后，普通.css文件仍按原有逻辑处理，.module.css文件会启用CSS Modules功能
• 如果不需要自定义类名格式，可直接将modules设为true，使用默认配置
• 修改后重启Webpack服务，导入的styles对象就能正常获取类名映射，不再返回undefined

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