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

我有一个项目，我将LESS用作CSS预处理器，Gulp作为我的编译工具。我有一个文件夹结构如下：编辑LESS部分时，Chrome不能实时重新加载

样式
>少
>>谐音
>>> _ colours.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一切compilles，我得到一个index.css文件（与源地图）在我的样式表目录中，我可以带到Chrome并进行实时编辑。

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

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

我使用Chrome 43

来源

2015-05-23 kshep92

不是一个错误，这是表明行为。 Chrome不会自动重新加载样式表，并且不会检测文件更改。 –

当你说“Chrome不会自动重新加载样式表并且不会检测文件更改”时，你说的是_colours.less文件，对吧？ – kshep92

是的，铬无法知道文件已更改。 –

我不认为这是预期的行为的原因，它为什么要对index.less，而不是工作的_colours.less。

当然，你应该确保保存_colours.less确实运行你的编译任务。（误差较小，应停止/破手表任务太）

与Chrome的自动重CSS一些较旧的和新的问题说明如下：https://code.google.com/p/chromium/issues/detail?id=273384

当加入您的网络映射确保您的工作空间包括您stylsheets不仅stylsheets/less。

来源

2015-05-24 08:48:30

我可以确认保存_colours。较少的文件会导致编译器任务触发。我的工作区不仅包括stylesheets/less文件夹，还包括整个项目文件夹。我得不到的是，编译器任务在_colours.less文件更新后更改了index.less文件，因此理论上index.css也会更新，应该引发重载，对吧？在您指示我使用@import语句的讨论话题中，似乎人们也会遇到类似的问题。 – kshep92

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

回答

相关问题