SASS Invalid CSS error on Rails

Question

I'm trying to use http://startbootstrap.com/stylish-portfolio in my rails app however I'm getting the following error in my stylish-portfolio.css.scss.erb file:

ActionView::Template::Error (Invalid CSS after "body ": expected selector or at-rule, was "{"

This is my css file:

@import 'bootstrap'

/* Global Styles */

html,
body {
  height: 100%;
  width: 100%;
}

.vert-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.vert-text h1 {
  padding: 0;
  margin: 0;
  font-size: 4.5em;
  font-weight: 700;
}

...

That looks like the CSS file for FontAwesome. Could you check the actual contents of `stylish-portfolio.css.scss.erb` and maybe edit the post? — lime, Jan 15 '14 at 15:08
Note to future readers: the CSS is now the correct one, disregard the above two comments. :) — lime, Feb 23 '14 at 12:08

lime · Accepted Answer · 2016-10-26T12:55:38.587

44

My guess is that you are missing a semicolon in the stylish-portfolio.css.scss.erb file, maybe after an SCSS variable definition?

Here's the original CSS file I assume you are basing this on, maybe you want to do a diff between that and yours to determine what has changed.

Edit: Yup, apparently there is a missing semicolon after the first line. The @import statement

@import 'bootstrap'

should instead be

@import 'bootstrap';

since you are using the .scss extension. You can omit the semi-colon if you are using the .sass extension.

edited Oct 26 '16 at 12:55

answered Jan 15 '14 at 15:23

lime

6,901
4
39
50

Stupid mistake, posted the wrong file here. Actually I was missing a semi-colon in my stylish-portfolio.css.scss file. Anyways I will edit the question, thanks! – Leo Costa Jan 15 '14 at 15:25
On another notice if you could give me a hand on another error I'm having I would very much appreciate (http://stackoverflow.com/questions/21142113/asset-pipeline-undefined-variable-sass). I've been googling for a long time now and still can't find a solution. – Leo Costa Jan 15 '14 at 15:58
To be clear: the issue is that it is specifically the @import 'bootstrap' line that needs to have a semi-colon at its end. The comment on the question about "that's not the file producing the error" appears to be related to some previous snippet that the asker posted, but it made me misinterpret "after" in this answer to mean, "somewhere lower in the file". Docs here https://github.com/twbs/bootstrap-sass#sass – iftheshoefritz Feb 21 '14 at 07:14
1

Thanks Fritz, I tried to edit the answer to clarify this a bit. – lime Feb 23 '14 at 12:06
Link to the original CSS file is dead. – Ege Ersoz Oct 25 '16 at 15:20
Thanks Ege, I edited the link to point to an older version of the file. – lime Oct 26 '16 at 12:56

SASS Invalid CSS error on Rails

1 Answers1

Linked