node-sass无法编译新增SCSS文件问题求助

我之前也碰到过一模一样的问题，node-sass 4.x版本的watch模式确实有个小缺陷：它启动时会一次性扫描目标目录里的所有现有文件，但不会主动监测新增文件的变化，这就是你每次加新文件都得手动重启进程的原因。下面给你几个实用的解决办法：

方法1：用递归通配符指定所有SCSS文件 #

修改你的npm脚本，用**/*.scss递归匹配scss目录下所有层级的.scss文件，让watch模式能识别到后续新增的文件：

"scripts": {
  "sass": "node-sass assets/scss/**/*.scss assets/css/style.css --source-map assets/css/style.css.map -w"
}

这个通配符会告诉node-sass监听整个scss目录树里的所有.scss文件，不管是原本就有的还是后来新增的，只要有修改都会触发编译。

方法2：借助nodemon自动重启node-sass进程 #

如果通配符的方式没起作用，可以试试用nodemon帮你监测目录变化，自动重启node-sass：

1. 先安装nodemon作为开发依赖：

npm install nodemon --save-dev

2. 调整你的npm脚本：

"scripts": {
  "sass": "nodemon --watch assets/scss/ --ext scss --exec 'node-sass assets/scss/main.scss assets/css/style.css --source-map assets/css/style.css.map'"
}

nodemon会持续盯着scss目录下所有.scss文件的动静（包括新增文件），一旦检测到变化就自动重新执行编译命令，相当于帮你省去了手动重启的麻烦。

方法3：升级node-sass到修复该bug的版本 #

node-sass在后续的4.x版本（比如4.14.x）里已经修复了watch模式不识别新增文件的问题。如果你的项目兼容更高版本，可以尝试升级：

npm install node-sass@^4.14.0 --save-dev

注意：升级前要确认你的Node.js版本和目标node-sass版本兼容（比如Node 12对应node-sass 4.14.x），避免出现兼容性报错。

你之前试的node-sass assets/scss/ -o assets/css/...命令没用，是因为node-sass的watch模式在启动时只会扫描当时存在的文件，新增文件不在它的初始监听列表里，自然不会触发编译。

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