修改被导入Less文件时Gulp.less编译异常：页面刷新但样式未更新

看起来你的问题出在Gulp任务的配置逻辑上——虽然BrowserSync能感知到Less文件的变化并触发页面刷新，但你的styles任务并没有正确重新编译入口文件（也就是main.less），导致最终的main.min.css没有同步更新导入文件的样式。

咱们先拆解一下你当前代码的问题：
你的styles任务里，gulp.src('app/less/**/*.less')会把所有Less文件都单独编译成对应的min.css文件，而不是只编译作为入口的main.less。这就导致：当你修改某个被导入的Less文件时，Gulp可能只编译了那个单个文件（生成它自己的min.css），但你的页面实际引用的是main.min.css，自然看不到样式更新。

修复步骤： #

1. 调整styles任务的编译入口
   把编译目标改成仅入口文件（比如main.less），这样所有导入的文件变化时，Less编译器会自动追踪依赖，重新编译生成最新的main.min.css：

gulp.task('styles', function() {
  return gulp.src('app/less/main.less') // 只编译入口的main.less
    .pipe(less())
    .pipe(rename({ suffix: '.min', prefix : '' }))
    .pipe(autoprefixer(['last 15 versions']))
    .pipe(gulp.dest('app/css'))
    .pipe(browsersync.reload({ stream: true }));
});

2. 确保Watch任务正确监听所有Less文件
   你需要一个watch任务来监听所有Less文件的变化，只要任何一个文件修改，就触发styles任务重新编译入口文件：

gulp.task('watch', ['browser-sync', 'styles'], function() {
  // 监听所有Less文件的变化，触发styles任务
  gulp.watch('app/less/**/*.less', ['styles']);
  // 可以在这里添加其他文件的监听，比如HTML、JS
});

3. （可选）处理潜在的缓存问题
   如果还是遇到奇怪的缓存问题，可以引入gulp-cached插件来避免重复编译未修改的文件，或者用gulp-plumber防止编译错误中断任务，但这一步通常不是必要的，核心问题还是前面的入口配置。

这样调整后，当你修改任何被main.less导入的Less文件时，Gulp会重新编译main.less生成最新的main.min.css，BrowserSync也会同步刷新页面展示最新样式。

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