如何在yarn start脚本中启用node-sass监听并在同一终端运行

你当前的配置无法同时执行两个命令的核心原因是&&属于串行执行符，必须等待前一个命令执行完成、进程退出后才会触发下一个命令。而yarn build:sass -- -w是监听模式，进程会持续挂起不会自动退出，因此后续的yarn start永远不会被执行。

推荐方案：使用 concurrently 工具实现跨平台多命令并行运行 #

该方案支持Windows、Mac、Linux全平台，命令日志统一输出，终止进程时会同时关闭所有并行任务，完全符合你的使用需求。

步骤1：安装依赖 #

执行以下命令将concurrently安装为开发依赖：

yarn add -D concurrently
# 或者使用npm
npm install -D concurrently

步骤2：修改package.json脚本配置 #

调整后的配置如下：

"build:sass": "node-sass src dist",
"watch:sass": "yarn build:sass -- -w",
"start": "PUBLIC_URL=/ react-scripts start",
"watch:css": "yarn build:sass && concurrently \"yarn watch:sass\" \"yarn start\""

步骤3：执行命令 #

直接运行yarn watch:css即可实现：

• 先执行一次全量sass编译，确保css文件是最新版本
• 同时启动sass文件监听和react项目启动，两个命令的运行日志都会输出在同一个控制台
• 按Ctrl + C终止时，两个任务会同时关闭

可选临时方案（仅适用Unix/Mac系统，不推荐） #

如果不想安装额外依赖，也可以直接用&后台运行符实现并行，但是Windows系统的cmd不支持该语法，且后台进程容易残留，不建议生产环境使用：

"watch:css": "yarn build:sass && (yarn build:sass -- -w & yarn start)"

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