通过npm start启动的React项目中SCSS编译生成的CSS文件位置在哪？

问题说明 #

我在React.js应用中使用SCSS，通过npm start命令启动服务，无需手动将SCSS编译为CSS非常方便，但我现在想要查看实际生成的CSS文件，请问它存储在什么位置？

以下是我的package.json配置：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.3",
    "react-bootstrap-submenu": "^1.0.3",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.0",
    "sass": "^1.39.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ]
}

解答 #

• 开发模式（执行npm start）时，你使用的react-scripts内置了webpack-dev-server，所有编译后的资源（包括CSS、JS）都直接存储在内存中，不会写入本地磁盘，所以你在项目文件夹下找不到实际的CSS文件。如果需要在开发阶段查看编译后的CSS，可以直接打开浏览器开发者工具，在「元素」面板的样式栏或者「Sources」面板的对应资源路径下查看即可。
• 生产构建模式（执行npm run build）时，所有编译后的静态资源会写入到项目根目录的build文件夹下，CSS文件存储路径为build/static/css/，文件名默认会附带内容哈希，格式类似main.abc123.css。
• 如果你需要在开发模式下也得到写入磁盘的CSS文件，只能先执行npm run eject暴露webpack配置（该操作不可逆），再修改webpack开发配置，开启CSS输出到磁盘的相关配置，一般不推荐这种操作。

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