Heroku/Zurb Foundation Sass SyntaxError in Rails App - css

My app is throwing this error when I try to push to Heroku. It looks like the culprit is a rogue !global line in a stylesheet somewhere, but I'm not sure where the source code lives.
rake aborted!
Sass::SyntaxError: Invalid CSS after "...odules, $name) ": expected "}", was "!global;"
(in /tmp/build_6cf14c02-e49b-44e7-819c-871d5da3cf73/app/assets/stylesheets/framework_and_overrides.css.scss:13)
Would greatly appreciate any help.

Change your foundation-rails gem from 5.4.4.0 to 5.4.3.1 in your gem file
gem 'foundation-rails', '5.4.3.1'
then run
bundle update
This should do it for now tell they fix it :)
Additionally:
As for finding the file "bundle show foundation-rails" use the finder "Go to folder" to the path and find "_function.scss" it is under vendor assets stylesheets foundation _function.scss
Both of my answers could be found in the link by gustavo-beathyate
As for heroku error
make sure if your adding any thing to the assets to use
rake assets:precompile RAILS_ENV=production
and then
also when you push use -f
git push -f heroku master
if not only use
git push -f heroku master

Here's a solution:
http://foundation.zurb.com/forum/posts/19222-sass-syntax-error-on-rails
You basically have to open the gem and modify line 13 in _functions.scss, removing the call to !global.

This issue has now been fixed with v5.4.5 of Foundation. See also here for some more background on the issue.

I was getting your exact error after I upgraded to foundation-rails 5.5.0.0. I updated the sass-rails gem per this post: https://stackoverflow.com/a/27807138/1753903 and the error went away.

Related

rake assets:precompile bug with rails and compass and "*"

I use rails 4.2.0 and compass-rails (2.0.2)
I have a css.scss file with
#import "compass/utilities/sprites";
#import "icons/*.png";
#include all-icons-sprites(true);
I have many image .png in app/assets/images/icons/XXX.png
I want deploy my app in production, it's work but with no assets, so I start
rake assets:precompile
in production environement.
An error occure:
rake aborted!
Sprockets::FileNotFound: couldn't find file 'icons/*.png'
I try to remove assets files in cache, nothing change.
details error: http://pastebin.com/6ggS3pP2
I think there is a problem with wildcard and path.
I try in dev ENV, nothing change...
I don't know what do more, what's the solution, plz?
to fix it, I just use mster branch of git like :
gem 'compass-rails', github: 'Compass/compass-rails'

Integrating Normalize.css with the rails asset pipeline

I followed the super simple direction on how to install the normalize-rails css reset gem outlined here
https://github.com/markmcconachie/normalize-rails
but I keep getting error stating that
"couldn't find file 'normalize-rails'"
when I included
*= require normalize-rails in my application.css file. I ran bundle, bundle update etc, still no dice. Am I installing this incorrectly? What I'm doing wrong?
Check this Steps:
Add gem 'normalize-rails' in your Gemfile
Run bundle install command in your terminal
Check gem is installed or not by running bundle show normalize-rails
in your terminal
restart your rails server
Add *= require normalize-rails in your application.css file before *= require_tree .
If you missed any steps then check it...
NOTE: You must using Rails 3.1+
First, run the following command to see if the gem has been installed
bundle show normalize-rails
And remember to restart your server after installing new gem :)

Heroku app doesn't have any CSS

So I just uploaded my site to heroku but none of the styles are showing. I have no idea what the problem is.
Heroku site http://shielded-garden-1674.herokuapp.com/
This is my Github repo https://github.com/LaurentLousky/todolist
This is what "heroku log" gives me. http://pastebin.com/cj17Pc4a
Im using Foundation 5 for styling.
Thank you all so much, any help is highly appreciated.
By default, Heroku will not serve your assets. You should add this to config/application.rb:
config.serve_static_assets = true
Or add this to the Gemfile and run bundle install :
gem 'rails_12factor', group: :production
See https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets and https://devcenter.heroku.com/articles/rails-asset-pipeline for a more thorough explanation
I am not able to see your Heroku app.
However, check if your code adds/links your css files in the same way your files are named. For example if in your code your files are named "Styles.css", make sure your code states the name of your files as "Styles.css" and not "styles.css" because once in Heroku cloud, system may not recognize the file.

SASS with normalize and Codekit

When I'm trying to compile my project that include only
#import "normalize" from compass-normalize gem it tells me
thie error
Compass was unable to compile one or more files in the project:
LoadError on line 161 of /Applications/CodeKit.app/Contents/Resources/engines/compass/bin/../lib/compass/configuration/data.rb: no such file to load -- compass-normalize
Run with --trace to see the full backtrace
okey. So I have reinstalled all gems but it still doesn't work. What is more when I'm doing compass watch in command-line it works! And actually it compiles... what's wrong with codekit than?
Are you sure you have that specific gem? If not, you could try:
sudo gem install compass-normalize

sass --watch not updating after initial launch (sass 3.1.16)

I am working with sass to write the css for a simple static website I am working on. I have run sass --watch custom.scss:custom.css which compiles fine on launch with the message:
Sass is watching for changes. Press Ctrl-C to stop.
overwrite custom.css
However, whenever I update the .scss file, nothing happens. I haven't used SASS outside the context of a rails app before, so I'm wondering if I am missing something?
My scss file is incredibly simple as well, so I doubt it is choking on anything, especially since it works on the first run.
sass -v reports Sass 3.1.16 (Brainy Betty), on Lion 10.7.2
This has now been fixed in the latest commit.
The updated stable gem (3.1.17) hasn't been released yet but there are a few choices while you wait:
Stick with 3.1.16 and use absolute paths when loading up watch, e.g:
sass --watch /User/name/project/scss:/User/name/project/css
The bug should only occur with relative paths so this works around it.
Use the updated (alpha) version
gem install sass --pre
Temporarily roll back to 3.1.15 as suggested by #Marco Lazzeri
Same problem here.
I don't know exactly what the problem is, but rolling back to the previous version is a temporary workaround:
gem uninstall sass -v=3.1.16
gem install sass -v=3.1.15
As it is mentioned by pjumble, it is a known bug in process. You can use absolute path to address this problem, before a new version is release.
This is what I usually do to avoid typing a full path:
cd work-directory
sass --watch `pwd`/sass:`pwd`/css
Hope this work for you:)
I too had the same problem.
Just by updating my gem, it worked.
gem update sass
I had this problem too with the latest SASS version at this time. Downgrading to version 3.2.9 did the trick to me on 2 different Windows 8 computers.
gem uninstall sass
gem install sass -v 3.2.9
I Had a similar problem: "Change detected", but then no writing despite it compiling and overwriting the .css file days before.
Notes:
Reinstalling sass in Ruby didn't work.
I pointed sass --watch at some other projects and they worked.
What seemed to create this problem was that I had made a copy of one project while it was being watched, then started watching the second project.
I can't say for sure but this seem to "trip up" Ruby, maybe it was the cache or some stored info about the file locations.
Solution:
I just created a newly named project folder, dragged into it all the scss files from the second project, renamed the main scss file (e.g. "uikit-main.scss" to "uikit.scss"), --watch it, and it began overwriting correctly again.
I`ve also stuck with sass (v3.4.23) not recompiling after the first run, but it was realted with scss`s folder structure - Sass can`t watch changes in files that are located by the path directing upwards the watching file. Link for details
In my case, the problem was because I'm using sass in a vagrant machine with ubuntu. I install and run sass directly from my host OS (Mac) and the watch mode starts to work.

Resources