0

I have a project where I'm using LESS as my CSS pre-processor and Gulp as my build tool. I have a folder structure as follows:

  • stylesheets
  • > less
  • >> partials
  • >>>_colours.less
  • >> index.less

My index.less file looks like this:

@import "partials/_colours";

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

My _colours.less file looks like this:

@colour: red;

And my gulpfile.js looks like this (simplified, removed error handling)

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']);
});

When I run gulp less:watch everything compilles and I get an index.css file (with source maps) in my stylesheets directory that I can take to Chrome and wire up for live editing.

If I edit the index.less file in the Chrome editor and save, I get an instant reload. However, if I change the value of the @color variable in _colours.less I don't see the change until I reload the window.

Is this a bug or am I doing something wrong?

I'm using Chrome 43.

kshep92
  • 841
  • 1
  • 11
  • 22
  • 1
    Not a bug, this is expceted behabiour. Chrome will not reload the stylesheet automatically and will not detect file changes. – Fabián Heredia Montiel May 23 '15 at 18:50
  • When you say "Chrome will not reload the stylesheet automatically and will not detect file changes.", you're talking about the _colours.less file, right? – kshep92 May 23 '15 at 18:56
  • Yes, chrome has no way of knowing the file has changed. – Fabián Heredia Montiel May 23 '15 at 18:59
  • Is this documented anywhere? – kshep92 May 23 '15 at 19:03
  • Closest thing I could find: https://developer.chrome.com/devtools/docs/css-preprocessors. But in all honesty this is due to the HTTP/1.1 being request-response and this being carried over to HTML/CSS. Additionally Chrome blocks AJAX/XMLHTTPRequests without the same origin and from/to the file:// protocol. – Fabián Heredia Montiel May 23 '15 at 19:11
  • 1
    Thanks very much for the help Fabian. I'll wait a couple days before I close this question in case anyone has anything more they wish to share. – kshep92 May 23 '15 at 19:42

1 Answers1

0

I do not think this is expected behaviour cause why should it work for index.less and not for _colours.less.

Of course you should make sure that saving _colours.less indeed run your compile task. (Less errors should stop / break the watch task too)

Some older and newer issues with Chrome autoreload CSS are described here: https://code.google.com/p/chromium/issues/detail?id=273384

When adding your Network Mappings make sure that your workspace includes your stylsheets and not only stylsheets/less.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • I can confirm that saving the _colours.less file causes the compiler task to trigger. My workspace not only includes the stylesheets/less folder, but the entire project folder. What I don't get is, the compiler task changes the index.less file after the _colours.less file is updated, so in theory index.css would also be updated which should should trigger a reload, right? It seems that folks on the discussion thread you directed me to also have similar problems once using @import statements. – kshep92 May 25 '15 at 01:10