rake assets:precompile throws Sass::SyntaxError: Invalid CSS after "*/"

Question

I hope this isn't a duplicate problem; I've tried other solutions on SO with no effect

When pushing my app to Heroku, the push has failed because application.css has not been able to compile.

My terminal output:

Running: rake assets:precompile
rake aborted!
Sass::SyntaxError: Invalid CSS after " */": expected selector, was "@font-face"
(in /tmp/build_17e92975-ae8d-446f-8678-110eeeccfb64/app/assets/stylesheets/adminsite/application.css)
(sass):1845

Attempts at solution

I've searched and deleted every instance of "*/" that comes before an @font-face inside the ../stylesheets/adminsite/ directory. Same issue and result.

I've tried setting:

  config.assets.compile = true

...Same issue

Edit

Here is my application.css (not the app level one, but the one failing in the adminsite directory)

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require jquery.ui.all
 *= require_self
 *= require normalize
 *= require ./global/plugins/bootstrap/css/bootstrap
 *= require ./global/plugins/uniform/css/uniform.default
 *= require ./global/plugins/bootstrap-switch/css/bootstrap-switch
 *= require ./global/css/components
 *= require ./global/css/plugins
 *= require ./global/plugins/simple-line-icons/simple-line-icons
 *= require ./admin/layout/css/layout
 *= require ./admin/layout/css/themes/light2
 *= require ./admin/layout/css/custom
 */

By removing and recompliling, I found that

*= require ./global/plugins/font-awesome/scss/font-awesome

that was 3 from the bottom of that list, was causing it to fail. I can now locally run

rake assets:precompile --trace RAILS_ENV=production

but I can't push to heroku using

git push herokunb newbeta:master

SOLVED:

It was the font awesome CSS. Removing that from require fixed it. The issue appeared unsolved only due to my own mistakes with git.

It's a file in a temp directory, not your project directory. Delete the file and try again. If it still complains, open the file and post the contents around line 1845 (or wherever it complains). — Substantial, Sep 08 '14 at 10:50
posted application.css. There is no "/tmp/build_17e92975-ae8d-446f-8678-110eeeccfb64/" ... seems to be constructed and deleted when using rake? — Will Taylor, Sep 08 '14 at 13:23
If you remove your font awesome CSS, you can deploy your app successfully. But all your pages won't have that CSS. How do you deal with it? — DBZHOU, Sep 07 '16 at 16:33
checkout my answer: https://stackoverflow.com/a/73564234/445908 — Siwei, Sep 01 '22 at 07:26

score 14 · Answer 1 · answered Sep 12 '14 at 18:18

Even though you found your way to fix it, I'm gonna share my solution too, because I was facing the same issue and it was kinda hard to debug it.

You're probably using rails 3.2, sass-rails 3.2 and font-awesome-sass 4.1.

It turns out that the rails 3.2 uses sass-rails 3.2.6, which depends on sass >= 3.1. However, It looks like sass 3.1 is not compatible with font-awesome 4.1, so I explicitely set the sass gem to use version 3.2 on my Gemfile.

gem 'sass-rails', '~> 3.2.6'
gem 'sass', '~> 3.2.0'

Hope this helps someone! ;)

I had the same problem, different versions, after the underlying `sass` gem was updated from 3.3.10 to 3.4.9. Setting it explicitly in the Gemfile fixed it: `gem 'sass', '~> 3.3.10'` — Curtis, Jan 15 '15 at 19:09

score 1 · Answer 2 · answered Jul 23 '15 at 04:47

1

I ran into a similar issue as well and stumbled upon this thread. Turned out for me, I left a } off of the end of one of my CSS statements. Added it in and I was back up within minutes.

answered Jul 23 '15 at 04:47

PSCampbell

858
9
27

Very similar. I threw all my css files through the W3 css validator and it spotted an errant " – SteveRawlinson Aug 11 '22 at 15:33

moeabdol · Answer 3 · 2019-10-07T03:43:42.207

Another way to solve this is to explicitly tell the asset-pipeline to use the css version of the asset over the scss one. For example, if you're importing a .scss file in your application.scss like this:

@import "angular-material";      # this will use scss version of the asset

You can alternatively tell it to use the css version like so:

@import "angular-material.css";  # this will use the css version

Most vendors provide scss and css versions, so it is useful to rely on css versions of assets especially when using vendor assets. Remember everything will be precompiled and uglified in the end, so wither you use scss or css they all end up the same.

score 0 · Accepted Answer · answered Sep 08 '14 at 17:05

SOLUTION

The file that was breaking things was the font awesome CSS. Removing that from application.css's "require" lines allowed the precompilation to work.

The way to do this was to first delete all of the precompilation require fields, showing that it would compile, and then to slowly add the require fields back to see where it broke.

(Thanks for all those who helped figure this out.)

score 0 · Answer 5 · answered May 05 '15 at 23:48

0

For me, I forgot to add # in front of the class sign-in.

It should be

#sign-in 
  (your code)

answered May 05 '15 at 23:48

Kevin Zhao

2,113
2
14
18

score 0 · Answer 6 · answered Jun 04 '15 at 00:39

I'm a newbie to rails and was having a similar issue when pushing to heroku. A friend looked at my application.css file and noticed that I had

*= require bootstrap

and

*= require bootstrap-datetimepicker

below the */

Removing them allowed me to push successfully.

rake assets:precompile throws Sass::SyntaxError: Invalid CSS after "*/"

6 Answers6

Linked