Stale Last-Modified in development when using @import

[bruz]

I ran into an issue when running Rails in development where the Last-Modified wasn't updating for stylesheets being pulled in with @import, which was causing the browser to cache inappropriately. I couldn't find anything documenting this, so wanted to post it here so that at the very least anyone else who runs into the problem might find it.

I have a minimal app to reproduce this, which is just a fresh Rails app with an application.scss that uses @import to pull in another file. Here's what it does when pulling the stylesheet URL generated by the default stylesheet_link_tag helper rails generates:

$ curl -I http://localhost:3000/assets/application.css?body=1 | grep Last-Modified
Last-Modified: Mon, 30 Jun 2014 05:22:58 GMT

# make an addition to the imported SCSS file
echo "body { font-family: 'Comic Sans MS'; }" >> app/assets/stylesheets/stuff.scss

$ curl -I http://localhost:3000/assets/application.css?body=1 | grep Last-Modified
Last-Modified: Mon, 30 Jun 2014 05:22:58 GMT

There's a fairly easy workaround, by turning off the debug flag for the style tag that pulls in the main application.scss:

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true, debug: false %>

This causes the stylesheet URL to change to http://localhost:3000/assets/application.css (no body=1 query param), and then the Last-Modified is correct. Turning the debug flag off also makes Sprockets concatenate all the stylesheets, although if you're using @import to pull in all your stylesheets you're already going to be getting one big, concatenated file.

I've poked around in Sprockets a little and it seems like it's calling mtime directly on the application.scss file to get Last-Modified, since with the debug flag on its expecting each file to be a separate request and not depend on the contents of other files.

[mjc]

Doesn't the browser do a separate Last-Modified check on the @imported file in debug mode?

[bruz]

The problem is that all of the @imported styles are served up in the single request for application.css and depend on that for cache-busting. So the content of http://localhost:3000/assets/application.css?body=1 is:

/* line 1, /Volumes/Encryptome/code/stale-last-modified-demo/app/assets/stylesheets/stuff.scss */
body {
  color: red;
}

/* line 4, /Volumes/Encryptome/code/stale-last-modified-demo/app/assets/stylesheets/stuff.scss */
body {
  font-family: 'Comic Sans MS';
}

[mjc]

Ah, good point.

On Mon, Jun 30, 2014 at 6:12 PM, Bruz Marzolf notifications@github.com
wrote:

The problem is that all of the @imported styles are served up in the
single request for application.css and depend on that for cache-busting. So
the content of http://localhost:3000/assets/application.css?body=1 is:

/* line 1, /Volumes/Encryptome/code/stale-last-modified-demo/app/assets/stylesheets/stuff.scss */
body {
color: red;
}

/* line 4, /Volumes/Encryptome/code/stale-last-modified-demo/app/assets/stylesheets/stuff.scss */
body {
font-family: 'Comic Sans MS';
}

—
Reply to this email directly or view it on GitHub
#226 (comment).

[todditron]

This is a bit beyond technical skill set, but I am pretty sure I was having the same problem.

Using @import technique to pull together multiple sass files, I would make a change to one of the child files and then save. This should have triggered the compiler, (and would have done so if I used the "require" technique), but did not work in this case. I had to make a change to the main sass file to get the compiler to run.

When I set debug:false, the issue went away.

Again, all this is a bit above my head and the fix from @bruz worked great. I just wanted to make a note this was (probably) an issue for me as well. Thanks.

[nring]

Having the same issue. Adding 'debug: false' as per @bruz worked for me too.