In case others are encountering this error, it took me awhile to figure this out (but only because I was learning as I go and knew nothing before I started playing around). I’m using a SMACSS template in my Middleman setup. In my styles.css.scss, I wanted to do several @import, since I had already gone ahead and created modular CSS files (in an attempt to follow SMACSS). For newbies like me, please note that When using multiple @import’s, you need to have a semi-colon after each @import line, or else you’ll see errors like this:

/source/stylesheets/style.css.scss:3: Invalid CSS after "...base/normalize"": 
expected selector or at-rule, was "@import "base/base" (Sass::SyntaxError)

Sometimes this error means that there’s a css error inside one of the individual css files you’re trying to import. But nope, in this case, it was simply a matter of not having a semicolon after @import base/normalize (and, as a result, no matter what other @import’s I used after that first one, I always ended up with the same error message). But problem solved. I wish middleman/sass provided slightly better error messages, so that I could have pinpointed the issue much more quickly.

Leave a Comment

Your email address will not be published. Required fields are marked *