升级Webpack v5后导入CSS出现导出未找到警告求助

问题现象 #

升级Webpack到v5版本后，所有导入CSS的文件均出现如下警告：

WARNING in ./src/components/desktop/layout/AutoAuth.js 48:12-21
export 'layerHide' (imported as 'layerHide') was not found in '../../../css/layout.css' (possible exports: default)
@ ./src/components/desktop/pages/LoadUser.js 4:0-42 6:42-50
@ ./src/router.js 60:0-59 119:15-23
@ ./src/index.js 8:0-30 31:83-89

当前采用的CSS导入方式：

import {layerShow, layerHide, siteWrapper} from "../../../css/layout.css";

Webpack配置中处理CSS的规则：

{
  test: /\.(sa|sc|c)ss$/i,
  use: [
    { loader: MiniCssExtractPlugin.loader },
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: "[local]--[hash:base64:5]",
        }
      }
    },
    "postcss-loader",
    'sass-loader',
  ]
},

使用的依赖版本：

sass-loader: 14.1.0
postcss-loader: 8.1.0
css-loader: 6.10.0
mini-css-extract-plugin: 2.8.0
webpack: 5.90.1

已尝试修改CSS文件目录、配置别名、调整loader组合，问题未解决；Webpack升级前无此警告。

原因分析 #

Webpack v5搭配新版css-loader时，CSS模块的导出逻辑发生了变化。开启modules配置但未指定exportType时，css-loader默认仅导出default对象（包含所有类名），不再自动生成命名导出，导致原有的解构导入方式无法匹配到对应类名，触发警告。

解决方案 #

方案1：改用默认导入后解构 #

修改导入语句，先默认导入整个样式对象，再通过对象访问类名：

import styles from "../../../css/layout.css";

// 使用示例
// element.classList.add(styles.layerShow);

方案2：配置css-loader生成命名导出 #

在css-loader的配置中添加exportType: "namedExport"，强制生成命名导出，保持原有解构导入方式不变：

{
  loader: "css-loader",
  options: {
    modules: {
      localIdentName: "[local]--[hash:base64:5]",
      exportType: "namedExport" // 新增配置项
    }
  }
},

如果你的CSS类名包含中划线等不符合JS变量命名规则的字符，可额外配置exportLocalsConvention将类名转换为驼峰格式，方便解构使用：

modules: {
  localIdentName: "[local]--[hash:base64:5]",
  exportType: "namedExport",
  exportLocalsConvention: "camelCase" // 将kebab-case类名转为camelCase
}

验证 #

修改配置或导入方式后，重新执行构建命令，警告应消失，CSS类名可正常作用于DOM元素。

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