Rails precompile error in CSS

Question

Invalid CSS after "}": expected selector or at-rule, was "}"
  (in /home/test/www/dispatch/app/assets/stylesheets/application.css)
(sass):364

The above error is what is occurring in my precompile and I'm unable to find the problem. I've tried renaming the file to application.css.scss and I get the same error, with a different line number :405

The thing that has me stumped is that this file only contains 159 lines so I'm not sure where that line number is coming from.

I'm precompiling on my local machine because last night this error occurred in an attempt at a production migration.

Answer 1

If its your application.css then it would compile all your css to that file, so there's a chance that the problem isn't in that file itself, but in a file it's compiling into it. Check your code for a missing semicolon.

Answer 2

I've hated these errors because they don't provide any stack trace. So once this happens, you are forced to spend hours seaching for that semi-colon. I hope Rails' guys will fix this soon.

Meanwhile, I've found an excellent way to detect such errors, by passing them through your CSS Compiler or compressor. In my app, we use SASS, so I can call:

sass --style compressed --scss -C your_problematic_file.css

That'll tell you if there's any error with that file, and the line number. You'll need to run this on every CSS file that can possibly be a culprit.

In my case, it was an extra } around media queries.

Answer 3

I agree with @Digi_Cazter. But the same error may happen because of putting invalid brackets like

.someclass{
  property: value;
}}

Answer 4

I was missing the semicolon. Mine was left off at the end of the line declaring "$grayMediumLight". Maybe this will save someone the 30 minutes I spent.

Answer 5

Glad you found your error and fixed it, but I wanted to explain a little more for other newbies like me that might need to look in a different place for their fix.

I just had this issue, and for me example.css.scss precompiled to example.css in /public - and an additional "}" was added at the end of a media query -- in /public/example.css even though there was no error in /example.scss.css

For anyone else having this issue, compare your SCSS and CSS with something like Kaleidoscope to check for any syntax errors creeping in during your precompile and troubleshoot from there.