React项目中使用Sass时，如何在浏览器检查页查看最终编译CSS文件？

这是因为React项目默认启用了Source Maps，浏览器会通过映射关联到原始SCSS文件，而非编译后的最终CSS。以下是几种解决方法：

• 临时关闭Source Maps（Create React App项目）
  修改package.json里的启动脚本，添加环境变量禁用Source Map生成：

  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start"
  }
  

  重启开发服务器后，浏览器调试工具中就会显示打包后的编译CSS文件（通常是main.css这类合并后的文件）。

• 调整Webpack配置（自定义项目）
  若你手动配置Webpack，修改webpack.config.js：

  • 将devtool选项设为false，关闭Source Map生成；
  • 确保mini-css-extract-plugin配置正确，将编译后的CSS输出为独立文件。
    重新构建后，就能在调试工具中找到对应的CSS文件。

• 调试工具内切换视图
  即使开启Source Map，Chrome等浏览器的调试工具也支持切换到编译后代码：
  在Elements面板的样式区，点击代码块右上角的{}图标（“Toggle source map”），即可切换查看原始编译后的CSS代码；也可以直接在Sources面板的webpack:///static/css目录下找到编译后的CSS文件。

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