Node Sass监听模式直接编译变更文件而非入口文件的问题

你遇到的情况完全属实，这是node-sass v4.x早期版本（包括4.8.3）在watch模式下的一个常见行为问题，我来帮你拆解原因和解决办法：

为什么会出现这个问题？ #

当你使用node-sass指定单个入口文件（比如./sass/import.scss）并开启--watch时，它的监听机制虽然能检测到依赖文件（比如./sass/components/button.scss）的变化，但处理逻辑存在缺陷：它会直接编译触发变更的那个依赖文件，并将输出覆盖到你指定的source/css/style.css中，而不是从你指定的入口文件重新编译整个依赖树。这就导致你的输出文件变成了单个组件的CSS，而非完整的合并样式。

解决办法 #

这里有几个可靠的方案，你可以根据项目情况选择：

1. 添加--recursive参数监听整个目录 #

修改你的命令为：

./node_modules/node-sass/bin/node-sass ./sass/import.scss source/css/style.css --watch --recursive

加上--recursive后，node-sass会监听sass目录下的所有文件变化，一旦检测到任何文件修改，就会重新编译你指定的入口文件import.scss，确保输出的是完整的合并样式。

2. 监听整个目录并利用局部文件命名规则 #

如果--recursive参数在你的版本中不生效（部分v4.8.x版本可能存在这个问题），可以改用监听整个目录的方式，同时将组件文件命名为下划线开头（比如_button.scss）：

./node_modules/node-sass/bin/node-sass ./sass/ --output source/css/ --watch

node-sass默认不会编译下划线开头的"局部文件"，只会编译不带下划线的import.scss为style.css。这样无论哪个组件文件修改，都会触发入口文件的重新编译，输出完整样式。

3. 升级node-sass或切换到dart-sass #

这个问题在node-sass v4.14.x（v4分支的最后稳定版）中已经被修复，如果你能升级版本，watch模式会正确地在依赖文件变化时重新编译入口文件。

另外，官方现在已经推荐使用dart-sass作为node-sass的替代方案（node-sass已经停止维护），它的watch机制从设计上就会追踪完整的依赖树，依赖文件变化时自动重新编译入口文件，避免这类问题。你可以通过npm install sass替换node-sass，命令格式基本一致：

./node_modules/sass/sass ./sass/import.scss source/css/style.css --watch

注意事项 #

确保你的组件文件都是通过@import（node-sass）或@use/@forward（dart-sass）引入到入口文件import.scss中的，这样依赖关系才能被正确识别。

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