如何监听SCSS目录并在对应子文件夹中单独编译生成CSS文件？

针对你的目录结构和需求，推荐用 Dart Sass（官方推荐）+ chokidar-cli（文件监听）+ clean-css-cli（CSS压缩） 的组合，这套方案轻量且维护性强，能完美实现你的需求。

步骤1：安装依赖 #

在项目根目录执行以下命令安装开发依赖：

npm install --save-dev sass chokidar-cli clean-css-cli

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

在项目的package.json中添加以下脚本：

"scripts": {
  "build:scss": "find css -name '*.scss' -exec sass {} {}.css --no-source-map \\; && find css -name '*.scss.css' -exec mv {} $(dirname {})/$(basename {} .scss.css).css \\;",
  "minify:css": "find css -name '*.css' ! -name '*.min.css' -exec cleancss -o {}.min {} \\;",
  "watch:scss": "chokidar 'css/**/*.scss' -c 'npm run build:scss && npm run minify:css'"
}

脚本说明： #

• build:scss：遍历css目录下所有.scss文件，用Dart Sass编译为同名.css文件（先临时生成xxx.scss.css，再重命名为xxx.css），关闭了source map（如果需要保留可移除--no-source-map参数）。
• minify:css：遍历所有非压缩版的.css文件，用clean-css压缩生成对应的.min.css文件。
• watch:scss：用chokidar监听css目录下所有.scss文件（包括被@import引入的依赖文件），一旦文件修改，自动触发编译和压缩流程。

步骤3：启动监听 #

在终端执行以下命令即可开启实时监听：

npm run watch:scss

关键问题解决 #

• @import文件修改无响应：chokidar会监听css目录下所有.scss文件，包括被导入的依赖，只要依赖文件在监听范围内，修改后会自动触发重新编译。
• 无法生成min.css：通过clean-css-cli专门处理压缩，配合编译脚本实现自动生成。
• 配置繁琐问题：这套方案仅需3个简单脚本，无需复杂配置，比concurrently更易维护。

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