升级项目依赖后React组件CSS类名转译功能异常该如何解决？

数据老陈

2026-10-6

根本原因

css-loader v3.x版本调整了CSS Modules类名与@value变量的导出优先级，二者同名时@value变量会覆盖类名导出，你拿到的空值就是被覆盖后的无效导出结果。

解决方案

方案1：避免重名（最低成本）

直接修改重名的@value变量名，比如将@value container: #f5f5f5;改为@value containerBg: #f5f5f5;，同步修改所有使用该变量的位置即可，该方案不需要改动任何配置。

方案2：调整webpack配置适配

如果不想改动大量业务代码，可修改css-loader配置并补全postcss-loader处理逻辑，修改后的配置如下：

test: /\.css$/,
exclude: [
    path.resolve(__dirname, 'node_modules/@material'),
    path.resolve(__dirname, 'node_modules/@rmwc'),
    path.resolve(__dirname, 'node_modules/react-dual-listbox/lib/react-dual-listbox.css'),
    path.resolve(__dirname, 'node_modules/react-image-lightbox/style.css'),
    path.resolve(__dirname, 'web/js/src/modules/Common/styles/material.css'),
],
use: [
    { loader: 'style-loader' },
    {
        loader: 'css-loader',
        options: {
            importLoaders: 2,
            modules: { 
                localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
                exportLocalsConvention: 'asIs'
            },
        },
    },
    { 
        loader: 'postcss-loader',
        options: {
            plugins: [require('postcss-modules-values')]
        }
    }
],

参数说明：