React+Webpack构建Chrome扩展时，导入CSS Modules返回undefined的问题

AI 小北

2026-4-16

嗨，我之前也碰到过类似的坑，大概率是Webpack配置没到位，或者Chrome扩展的特殊环境影响了CSS Modules的加载，咱们一步步来排查解决：

检查Webpack的CSS Modules配置是否正确
这是最常见的原因，你需要确保Webpack对.module.css后缀的文件启用了模块化处理。在你的webpack.config.js里，要单独为CSS Modules配置规则：

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      // 处理CSS Modules文件
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
          },
        ],
      },
      // 处理普通CSS文件（非模块化）
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

关键点：必须给带.module.css后缀的文件单独配置modules: true，否则Webpack不会把它识别为CSS Modules，导入的styles自然就会是undefined。

确认文件路径和文件名是否正确
你代码里写的import styles from "../assets/injectedPopup.module.css";，要仔细检查：
- assets文件夹是不是真的在src目录下（和InjectedPopup文件夹同级）？
- 文件名有没有拼写错误？比如大小写问题（Chrome扩展环境对文件名大小写是敏感的）
  可以试着打印一下文件的绝对路径验证，或者临时改成绝对路径导入试试。
检查Chrome扩展Manifest的资源权限配置
Chrome扩展的注入组件/内容脚本加载本地资源时，需要在manifest.json里声明可访问资源。确保你的CSS文件和图片所在目录被加入web_accessible_resources：
```
{
  "manifest_version": 3,
  // ...其他Manifest配置
  "web_accessible_resources": [
    {
      "resources": ["assets/*.css", "lockr-logo.png"],
      "matches": ["<all_urls>"]
    }
  ]
}
```
如果没声明，浏览器会阻止资源加载，间接导致styles变量无法正常获取。
排查loader冲突和Tailwind CSS集成问题
你用到了Tailwind CSS，要确保它的配置和CSS Modules兼容。把postcss-loader加入到CSS Modules的loader链中，同时保证postcss.config.js配置正确：
Webpack规则调整：
```
{
  test: /\.module\.css$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } },
    'postcss-loader',
  ],
}
```
postcss.config.js配置：
```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```
清理Webpack缓存试试
有时候缓存会导致模块加载异常，你可以运行npm run build -- --no-cache，或者手动删除node_modules/.cache目录，然后重新构建项目。

你可以按照上面的步骤逐一排查，先从Webpack配置和文件路径入手，这两个是最容易出问题的地方~

备注：内容来源于stack exchange，提问作者Prathamesh Chavan