无需eject，如何在DevTools中查看CSS文件名？

嘿，我太懂你这种在DevTools里找不到真实文件名的抓狂感了！不用走eject这种破釜沉舟的路子，给你几个简单可行的方案：

方案1：确保Source Map相关环境变量正确设置 #

Create React App在开发环境默认是开启Source Map的，但有时候可能因为环境变量被意外覆盖导致失效。你可以直接在启动命令里强制指定：
修改package.json里的start脚本：

"scripts": {
  "start": "GENERATE_SOURCEMAP=true react-scripts start",
  // 其他脚本保持不变
}

改完后重启开发服务，再去DevTools里看看是不是能看到真实文件名了。

方案2：用react-app-rewired微调配置（无需eject） #

如果上面的方法没用，大概率是CSS相关的Source Map配置有问题（毕竟你看到的是<style></style>这类占位符）。可以用react-app-rewired来修改Webpack配置，不用eject：

1. 先安装依赖：

npm install react-app-rewired --save-dev

2. 修改package.json的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

3. 在项目根目录创建config-overrides.js文件，添加以下配置：

module.exports = function override(config, env) {
  if (env === 'development') {
    // 设置合适的Source Map类型，确保文件名正确映射
    config.devtool = 'eval-cheap-module-source-map';
    
    // 强制开启CSS相关loader的Source Map
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(loader => {
          if (loader.test?.toString().includes('css')) {
            loader.options = { ...loader.options, sourceMap: true };
          }
        });
      }
    });
  }
  return config;
};

4. 重启开发服务，再检查DevTools的文件列表。

方案3：更新React Scripts到最新版本 #

旧版本的react-scripts可能存在Source Map的bug，直接更新到最新版说不定就能解决：

npm install react-scripts@latest

最后别忘了检查Chrome DevTools设置 #

打开DevTools右上角的齿轮图标（设置），找到Preferences -> Sources，确保以下两个选项都已勾选：

• Enable JavaScript source maps
• Enable CSS source maps

这些方法都不用eject，应该能帮你找回那些真实的文件名！

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