编辑 LESS 部分时，Chrome 不会实时重新加载

Question

我有一个项目，我使用 LESS 作为我的 CSS 预处理器并使用 Gulp 作为我的构建工具。我的文件夹结构如下：

• 样式表
• > 少
• >> 部分
• >>>_colors.less
• >> index.less

我的index.less 文件如下所示：

@import "partials/_colours";

.red { color: @colour; font-size: 12em; }

我的_colours.less 文件如下所示：

@colour: red;

我的gulpfile.js 看起来像这样（简化，删除了错误处理）

var lessFiles = ['stylesheets/less/**/*.less', '!stylesheets/less/partials/*.less'];

gulp.task('less:compile', function() {
    return gulp.src(lessFiles)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(sourcemaps.write("maps", {includeContent: false, sourceRoot: '../less'}))
        .pipe(gulp.dest('stylesheets'));
});

gulp.task('less:watch', ['less:compile'], function() {
    return gulp.watch(lessFiles[0], ['less:compile']);
});

当我运行 gulp less:watch 时，所有内容都会编译，我会在我的样式表目录中获得一个 index.css 文件（带有源映射），我可以将其带到 Chrome 并连接以进行实时编辑。

如果我在 Chrome 编辑器中编辑 index.less 文件并保存，我会立即重新加载。但是，如果我在_colours.less 中更改@color 变量的值，我在重新加载窗口之前看不到更改。

这是一个错误还是我做错了什么？

我正在使用 Chrome 43。

Answer 1

我认为这不是预期的行为，因为它为什么适用于 index.less 而不适用于 _colours.less。

当然你应该确保保存_colours.less 确实运行你的编译任务。 （更少的错误也应该停止/中断监视任务）

此处描述了 Chrome 自动重载 CSS 的一些较旧和较新的问题：https://code.google.com/p/chromium/issues/detail?id=273384

添加网络映射时，请确保您的工作区包含您的 stylsheets 而不仅仅是 stylsheets/less。