无webpack的现有React项目配置SCSS运行npm startr报错求解

问题原因 #

你的报错是startr脚本的参数符号错误导致的：

• 当前你写的脚本是npm-run-all — parallel start watch:sass，其中的—是全角长破折号，不是npm-run-all要求的半角参数前缀--，npm-run-all会把这个破折号当成要执行的任务名，自然找不到对应任务报错。

解决方案 #

方案1：直接修正脚本 #

把package.json的scripts里的startr字段改成：

"startr": "npm-run-all --parallel start watch:sass"

改完重新执行npm run startr即可正常同时启动react服务和sass监听。

方案2（更推荐）：删除多余配置，直接用React内置的Sass支持 #

你当前用的是create-react-app脚手架（依赖里有react-scripts），它本身已经内置了Sass编译能力，完全不需要额外配置node-sass监听、npm-run-all这些工具，也不需要修改webpack配置，完全符合你的需求：

1. 先删除你package.json里多余的watch:sass和startr脚本
2. 不需要把scss编译成css文件再引入，直接在组件/入口文件里引入.scss后缀的文件即可，react-scripts启动和构建时会自动完成编译
3. 如果后续出现node-sass版本兼容问题，可以把已停止维护的node-sass替换成官方现在推荐的dart-sass：

npm uninstall node-sass
npm install sass --save-dev

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