I'm creating a web app that user will be accessing in the field, so they'd like to be able to manually toggle the styles from light to dark depending on the ambient lighting. I'm using jQuery.

I added an id attribute to my stylesheet, then created a button using the toggle() event, in which I change the href attribute to the CSS file I want. The CSS file has several @import directives as I split the styles into several files for maintainability.

My problem is only the main CSS file is being applied. I tried using the absolute path in the @import directives, but no luck.

Is there a fix here I'm missing, or do I have to inlcude everything in a single CSS file?

Edit:

Apprently this is only a problem in IE8, works fine in Chrome and Firefox. Unfortunately, my client wants only IE8. Looks like this is a duplicate of this question.