基于npm、node-sass、autoprefixer、cssnano搭建Sass自动监听构建问题求助

现有配置导致watch功能失效的核心问题 #

• 路径匹配范围缺失：当前watch脚本里的src/*仅能匹配src目录下的一级文件，无法递归监听嵌套目录下的scss变更，极易出现深层文件修改后无响应的问题
• 冗余的磁盘读写：当前链路是「编译生成未压缩style.css → 读取该文件做后处理输出压缩包」，既增加了不必要的IO开销，还存在管道处理时读写同一文件导致内容截断的风险
• 废弃参数兼容问题：当前使用的autoprefixer v10.x版本已经移除了CLI中-b的浏览器范围指定参数，原有写法后续会直接失效

修正后的完整配置 #

不需要新增任何依赖，仅调整package.json的配置即可满足需求，全程无Gulp/Grunt类任务工具：

{
  "name": "name",
  "version": "version",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:css": "node-sass src/main.scss | postcss --use autoprefixer --use cssnano > css/style.min.css",
    "build": "npm run build:css",
    "watch": "watch 'npm run build:css' 'src/**/*.scss'"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "cssnano": "^4.1.10",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-cli": "^8.3.1",
    "watch": "^1.0.2"
  }
}

操作注意事项 #

• 提前确认项目根目录下的css文件夹已存在，避免输出文件时报路径不存在的错误
• 通配符路径一定要用单引号包裹，避免不同操作系统的shell提前解析通配符导致匹配失效
• 启动监听后，仅需在项目入口引入css/style.min.css文件，任意scss文件保存后就会自动完成编译、加前缀、压缩全流程，直接刷新浏览器即可预览效果
• 若需要保留未压缩的调试版css文件，仅需调整node-sass的输出逻辑，将未压缩内容单独输出到独立路径即可，不需要改动监听配置

额外提醒：不要在管道流中将输入和输出指向同一个文件，否则会出现文件内容被截断清空的问题

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