SASS输出样式'compact'报错及Browser Sync不自动重载问题求助

一、SASS输出样式报错问题 #

你使用的是dart-sass（npm包名为sass），它已移除compact、nested这类旧输出格式选项，仅支持以下两种：

• expanded：展开格式（近似原nested效果，代码结构清晰）
• compressed：压缩格式（你当前可正常使用的选项）

修改代码中的sass配置：

.pipe(sass({
  outputStyle: "expanded" // 替换为expanded或compressed
}).on('error', sass.logError))

注：dart-sass没有直接替代原compact格式的选项，若需要类似紧凑输出，可考虑在sass编译后用其他工具二次处理，开发阶段expanded基本可满足需求。

二、Browser Sync自动重载失效问题 #

按以下步骤排查修复：

1. 确认Browser Sync初始化配置正确
   确保gulp任务中有完整的bs启动代码，示例：

   const bs = require('browser-sync').create();
   
   // 新增serve任务
   function serve() {
     bs.init({
       server: {
         baseDir: './build' // 指向你的编译输出目录
       },
       notify: false // 可选，关闭页面右上角通知
     });
     // 监听scss文件变化，触发style任务
     watch('src/scss/**/*.scss', style);
     // 监听html文件变化，自动刷新页面
     watch('build/**/*.html').on('change', bs.reload);
   }
   
   // 导出任务，确保启动时执行serve
   exports.default = series(style, serve);
   

2. 检查bs.stream()的位置
   你当前style任务中bs.stream()放在最后是正确的，但要确保dest('build/css/')已将文件写入bs监听的目录。
3. 确认文件监听规则正确
   保证watch路径覆盖你修改的文件：若html从src编译到build，可监听src/**/*.html（编译前文件），编译完成后触发bs.reload，或直接监听build目录下的html文件。

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