Question

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

样式表
＆GT;少
＆GT;＆GT;泛音
＆GT;＆GT;＆GT; _colours.less
＆GT;＆GT; 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文件并保存，我会立即重新加载。但是，如果我在@color中更改_colours.less变量的值，则在重新加载窗口之前我不会看到更改。

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

我正在使用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。

编辑LESS部分时，Chrome无法重新加载

1 个答案: