SASS, Livereload and Chrome Dev Tool crashes

I’ve been experiencing a bizarre behavior when using:

  • Livereload (either via the app or a command line utility like Grunt)
  • Google Chrome
  • Having Google Chrome Dev Tools open

Where, every time I make a change to an .scss file, and Chrome Dev Tools are open in the relevant window – it will crash when Livereload attempts to update the page.

Aw Snap! Error when using Livereload and Chrome Dev Tools

If you use SCSS and Livereload, this is obviously a huge issue. What was also perplexing was that it happened on some projects, but not on others.

I think that I’ve tracked down what the issue is for me:

The culprit is including CSS via multiple @import statements.

I tend to work on Drupal projects, and the current method of including stylesheets on a page is a big list of @import statements:

@import url("http://example.loc/modules/system/system.base.css?mtneoc");
@import url("http://example.loc/modules/system/system.menus.css?mtneoc");
@import url("http://example.loc/modules/system/system.messages.css?mtneoc");
@import url("http://example.loc/modules/system/system.theme.css?mtneoc");

This seems to be what is causing the crash. If stylesheets are included via a series of <link> elements, then everything works fine.

So, in the case of Drupal, the solution is to use the Link CSS module, which will switch the @import statements with <link> elements. I’ve discussed the module previously.

On other types of projects, you will need to investigate how to change your @import statements to <link> elements.

A bug was reported in Chromium, and apparently a fix was committed back in July. What that means in terms of when it will show up in mainstream Chrome, I’m not sure. I tried Canary last night (9/24/13) and still got the same crash.

Why the heck does Drupal use so many @import statements for CSS??

Any Drupal project means that a whole bunch of CSS files are included in any site. Various pieces of Drupal core, contributed modules, and then there is the theme css that a front end person is actually working on. It’s quite easy to have 40 or more stylesheets included in any project.

Unfortunately, this does not play well with older versions of IE – 8 and below have a limit to how many stylesheets they can cope with using <link> elements. That limit is 31. After that, other stylesheets are not parsed.

To work around that, Drupal uses a series of @import statments instead, so that a site will display correctly in old IE.

This is all intended to happen during development of a site. When it comes time to go to production, Drupal has a CSS aggregation option, which combines all the CSS in the site. A production Drupal site, if properly configured, won’t have dozens of HTTP requests just for CSS!