导入Module.css后返回undefined，编译正常该排查哪些点？

问题场景 #

导入CSS模块时返回undefined：

import styles from "../css/basic-styles.module.css";
console.log(styles); // undefined

CSS文件basic-styles.module.css内容：

*{
  outline: none;
}
.pageMoveIconInActive{
  color: #BBBBBB;
  cursor: default;
}

Webpack配置规则：

module: {
  rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
              loader: "babel-loader",
          },
      },
      {
       test: /\.css/,
       use: [
           "style-loader",
           {
               loader: 'css-loader'
           }
       ]
   },
}

编译日志显示模块生成成功，但styles仍为undefined。

排查要点 #

• 启用css-loader的模块化配置
  当前css-loader未开启模块化模式，默认只会处理样式注入，不会导出类名映射对象。需修改配置添加modules选项：

  {
    loader: 'css-loader',
    options: {
      modules: true // 可搭配localIdentName自定义类名格式，比如localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
  

  开启后css-loader会将类名转换成键值对导出，styles对象就能获取到.pageMoveIconInActive对应的类名。

• 核对文件名拼写
  导入路径写的是basic-styles.module.css，但你提到的CSS文件名是basic-styels.module.css（"styels"存在拼写错误，少了字母t），需确保磁盘上的文件名与导入路径完全一致，避免因拼写错误导入到错误文件。

• 清理Webpack缓存
  日志显示存在cached modules，旧缓存可能导致修改后的配置未生效。执行npm run dev --no-cache或手动删除node_modules/.cache目录后重新编译。

• 检查loader版本兼容性
  Webpack 5需要搭配对应版本的loader，css-loader需v5及以上，style-loader需v3及以上。若版本不兼容可能导致导出异常，可执行命令更新：

  npm update css-loader style-loader
  

• 注意全局样式的处理逻辑
  CSS中的*全局选择器不会出现在styles对象中，CSS模块仅导出类选择器、ID选择器等局部样式的映射，全局样式会直接作用于页面，但这不是styles为undefined的原因。

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