Gulp-sass+Browsersync：SCSS修改生效后自动回退问题求助

这种情况我之前在项目里也碰到过，折腾了好一阵才找到根源，大概率是文件监听触发时机不对或者编译/刷新流程冲突导致的，下面是几个常见的原因和对应的解决办法：

1. 用browserSync.stream()替代手动reload #

很多人会在sass编译完成后手动调用browserSync.reload()，但全页刷新很容易和文件监听的重复触发冲突，导致旧样式被重新加载。推荐用stream()方法直接注入编译后的CSS，不用全页刷新，从根源避免回退问题：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

// Sass编译任务，返回流确保gulp等待任务完成
function compileSass() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream()); // 实时注入样式，无需全页刷新
}

// 启动浏览器同步服务
function serve() {
  browserSync.init({
    server: './dist' // 确保这里是你的项目根目录，包含HTML文件
  });

  // 只监听SCSS源文件，触发编译任务
  gulp.watch('src/scss/**/*.scss', compileSass);
  // 监听HTML文件变化时再全页刷新
  gulp.watch('dist/*.html').on('change', browserSync.reload);
}

// 默认任务：先编译Sass，再启动服务
exports.default = gulp.series(compileSass, serve);

2. 避免文件监听重复触发 #

如果你的watch任务不小心监听了编译后的CSS文件（比如dist/css/**/*.css），会导致编译完成后再次触发watch，进而重复刷新页面，出现样式回退。一定要确保watch的只有SCSS源文件，排除编译后的输出目录。

3. 解决编译延迟与缓存问题 #

有时候Sass编译需要一点时间，但BrowserSync可能在编译完成前就触发了刷新，导致加载的还是旧缓存文件。可以通过以下方式优化：

• 确保所有gulp任务都返回流（比如上面的compileSass函数return了gulp的流），这样gulp会等待任务完全完成再执行后续操作；
• 在BrowserSync配置中增加刷新延迟、禁用缓存：

browserSync.init({
  server: './dist',
  reloadDelay: 150, // 给编译留150ms的缓冲时间
  cache: false, // 禁用浏览器缓存
  notify: false // 关闭刷新提示，避免干扰
});

4. 核对文件路径配置 #

如果HTML中引用的CSS路径和gulp编译输出的路径不一致，BrowserSync注入的新样式根本不会生效，页面会继续加载旧的缓存文件。比如：

• 如果你编译后的CSS输出到dist/css/main.css，那么HTML里的引用应该是<link rel="stylesheet" href="css/main.css">；
• 确保BrowserSync的server选项指向的是包含HTML文件的目录，而不是CSS目录。

先试试上面的方法，尤其是用stream()替代reload这一步，大部分情况下都能解决样式回退的问题。

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