relative css @imports result in 404 requests

[pascalpp]

I have a CSS file at /css/main.css which imports other CSS files in subdirectories of /css, using relative @import statements.

When I make edits, livereload makes a request for /lib/text.css, which should be /css/lib/text.css, resulting in a 404.

I thought maybe this was an issue with my app stack, which is complicated, so I made a new barebones repo which demonstrates the issue, using grunt-contrib-connect and grunt-contrib-watch.

The demo repo is https://github.com/pascalpp/grunt-watch-reload-issue. To replicate the issue, clone that repo locally, run npm install and grunt, and then open http://localhost:9090 and follow the instructions shown there.

The issue also occurs when I connect to the standalone LiveReload app (from the Mac App Store).

Obviously I could change the CSS imports to be root-relative, but that breaks other things, like my CSS minimizer.

If anyone has any insight on this issue, I'd really appreciate it.

[MishaMykhalyuk]

Hello. I have the same problem. You found a solution?

[pascalpp]

Unfortunately no. I've moved my stack to webpack and i'm no longer using grunt or livereload..

[MishaMykhalyuk]

Ok. If you are interested in gulp solution:

var gulp = require('gulp'),
        connect = require('gulp-connect');

gulp.task('connect', function(){
      connect.server({
            root: '.',
            livereload: true
    });
});

gulp.task('reload-styles', function(){
      gulp.src('./**/*.css')
            .pipe(connect.reload())
});

gulp.task('watch', function(){
      gulp.watch(['./**/*.css'], ['reload-styles']);
});

It works for me.

[leepowelldev]

Getting the same problem. However it's only in the dev environment and has no side effects as the file is updated on the subsequent call.

[smhg]

This is slightly related to #32, #53 and #36 as it is a secondary CSS that doesn't get reload properly.