Integrating Normalize.css with the rails asset pipeline - css

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 :)

Related

Rails 4 + bower-rails gem + bower + bootstrap sass

I have installed bower-rails gem
then in bower file I included bootstrap-sass, it installed bootstrap-sass in vendor/assets/bower_components.
Now according to a resource bower-rails automatically takes care of adding bower_components to assets, so I am trying this in application.css
*= require_tree .
*= require_self
*= require 'bootstrap-sass'
*/
But it throws me error that bootstrap-sass file not found.
Do I have to manually add vendor/assets/bower_components to assets?
I am pretty new to rails so some explanation would help a lot.
I am following this resource
EDIT:
On doing rails c and printing Rails.application.config.assets.paths
I can see vendor/assets/bower_components in asset paths
`
Finally I resolved the issue by removing all the bower components and running
rails g bower_rails:initialize
It created an intializer for assets bower_rails.rb, which finally solved the problem

Heroku/Zurb Foundation Sass SyntaxError in Rails App

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.

How can I fix this compile error, when attempting to compile sass using Prepros and Gumby?

I am using windows 7 to compile .scss with an application known as Prepros. (http://alphapixels.com/prepros/ ). I also downloaded the Gumby Framework(http://gumbyframework.com/) into my document root directory of localhost web-server. My goal is to use the gumby framework along with Prepros.
When I attempt to compile the scss file, I am receiving the following error:
Syntax error: Undefined operation: "power(golden_ratio(), 1) times 16px".
on line 52 of Z:/Ampps/www/Gumby-master/sass/extensions/modular-scale/stylesheets/_modular-scale.scss
from line 23 of Z:\Ampps\www\Gumby-master\sass\gumby.scss Use --trace for backtrace.
Also, if it is helpful, this is the config.rb file contained within the folder www\Gumby-master :
# Require any additional compass plugins here.
# Tell compass where to find local extensions
# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
extensions_dir = "sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("# {extensions_dir}/modular-scale"))
# Uncomment these to use regular Ruby gems.
# require 'modular-scale'
# require 'sassy-math'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
output_style = :compact
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Lastly,I reviewed this thread, but I did not find it helpful.
SOLUTION: I tried several things to fix this, and I am not absolutely which of them were responsible for fixing it.
Install ruby development kit
Install rails
Install gumby-framework gem (https://github.com/jorgecoca/gumby-framework)
Verify that the modular-scale gem is installed ( https://github.com/Team-Sass/modular-scale)
Use Advanced Prepros options to use third-party compass plugins (http://alphapixels.com/prepros/docs/sass-compass.html) (NOTE: initially I made the mistake of giving this path C:\Ruby193\lib\ruby\gems\1.9.1\gems, when in fact I realized I must provide this one C:\Ruby193\bin\ruby.exe, just like in the picture in the Prepros manual.)
-as stated in this thread, I opened my compass config.rb and commented out Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale")), and un-commented #require 'modular-scale' and #require 'sassy-math'.
I also ran into this exact same issue. So I would like to share things which I did.
Gumby framework README.md file states "Note: Please use modular scale 1.0.6, 2.x has not been integrated yet". Make sure the version of modular scale installed on your machine is 1.0.6!
How to check?
Let's assume the location of your Ruby installation is "C:\Ruby200".
Go to C:\Ruby200\lib\ruby\gems\2.0.0\gems. In this directory, you will see all the gems that were installed on the machine. (You should see sass, compass, modular-scale among others)
Make sure it says "modular-scale-1.0.6". If it doesn't, then delete the version you have over there. If you see multiple sassy-math over here, don't worry. We just want one modular-scale on the machine!
How to install Modular Scale v1.0.6?
Run gem install modular-scale v 1.0.6
What else to watch out for?
Like Daniel said, open your config.rb. Make sure you have the following lines in it!
#Require any additional compass plugins here.
require 'modular-scale'
require 'sassy-math'
Whatever you do, don't have the following code in your config.rb file. For this code to truly work, you have to have a directory called extensions in your sass directory, and you have to copy all the modular-scale binaries into that directory.
extensions_dir = "sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))
If you run into any other problems and somehow manage to solve it, please do add your answer here! The entire installation experience is terrible at the moment.
+1 for Parth Shah -- that worked for me. But the command to install modular-scale 1.0.6 is actually:
gem install modular-scale -v 1.0.6
He missed the hyphen before the v.
BTW as per this date, there has been a Gumby update so that Gumby supposedly now works with these compass, sass and modular-scale versions -- see below for install commands.
gem install compass -v0.12.4,
gem install sass -v3.2.18
gem install modular-scale -v2.0.4
I am still running the older versions but this update has been confirmed by other Gumby users.

Require Compass plugins (Gems) in Rails 3.2.X

I'm fairly new to Rails but I use sass/compass everyday in non-Rails projects.
I want to use compass plugin gems (e.g. compass-rgbapng) along with compass in the project (Rails 3.2.4). I'm using compass-rails too with gem 'sass-rails ~> 3.2.6' and gem 'sass ~> 3.2.7'.
I added both gems to the Gemfile in the :assets group. I bundle installed, etc. I use the #import call in my sass files to use the gems.
Here is what I get from the server :
File to import not found or unreadable: rgbapng.
Load paths:
Sass::Rails::Importer(/Users/simonwalsh/src/quarterly/app/assets/stylesheets/store/_base.sass)
/Users/simonwalsh/src/quarterly/app/assets/stylesheets
/Users/simonwalsh/src/quarterly/.bundle/ruby/1.9.1/gems/compass->0.12.2/frameworks/blueprint/stylesheets
/Users/simonwalsh/src/quarterly/.bundle/ruby/1.9.1/gems/compass->0.12.2/frameworks/compass/stylesheets
/Users/simonwalsh/src/quarterly/.bundle/ruby/1.9.1/gems/breakpoint-2.0.7/stylesheets
Compass::SpriteImporter
(in /Users/simonwalsh/src/quarterly/app/assets/stylesheets/store/_base.sass)
I did not require the gem anywhere as it is not supposed to be required. Even then, I don't even have a compass.rb or any other config files...
--- EDIT ---
I went to compass-rails doc to try their way of doing that. Here is what I tried :
I added a compass.rb in the initializer with either require 'rgbapng' or config.compass.require 'rgbapng' in it,
I tried the same as above in the application.rb file.
Still nothing works, the app refuses to comply with my #import rgbapng call...

Configuring Compass on Windows

I'm on Windows, and I have SASS running successfully in my project. Now, I want to include compass so I can take advantage of the pre-written mixins, etc.
First I simply tried this statement from within my working sass file: #import "compass/css3/transform";
Naturally, this didn't work since I didn't have compass installed, so I navigated to my Ruby directory and successfully installed the compass gem within c:/ruby193/bin. I can now successfully create compass projects within c:/ruby193/bin, but that doesn't do me much good.
I need run compass commands within my site, which lives here: c:/inetpub/mysite. When I try to do so, however, I get compass is not recognized as internal or external command
How can I get compass to work where I want it?
EDIT: a large part of my problem was that Ruby was installed without adding itself to the Windows Path environment variables, so I could only run SASS and Compass commands from within the C:/Ruby193/bin directory. This caused problems for me since, as a result, I thought that was where I needed to install compass. Anyhow, after figuring that out, I still haven't been able to get compass to work, but am planning on uninstaling SASS, Compass, and Ruby and giving this thing another try from scratch. I marked Stooboo's answer as correct since it was the best and most accurate, especially given the information he had to work with. Thanks!
here's how I do it
(One time)
install ruby http://rubyinstaller.org/
install compass, in a command window enter
gem install compass
to add compass to an MVC project, navigate to project folder and in a command window enter
compass create
you will get the default config.rb ... but here is my usual one
http_path = "/"
css_dir = "content/css"
sass_dir = "content/sass"
images_dir = "images"
javascripts_dir = "scripts"
to install bootstrap (for more info see https://github.com/thomas-mcdonald/bootstrap-sass)
add
require 'bootstrap-sass'
to your config.rb
enter (in your command window)
gem install bootstrap-sass
(I had to do a (in your command window)
gem update
after this but you may not need to)
enter (in your command window)
compass install bootstrap
(then ... every time you open the solution in Visual Studio)
navigate to project folder
in a command window enter
compass watch
(this will monitor project for saves and re-compile the scss files)
Hope that helps
Cheers
Stu
To install Compass, you should open your Windows console with Win+R, cmd and run:
gem update --system
gem update
gem install compass
Don't forget to remove all the stuff that you littered you Ruby installation with.
Use this command in order to add GEM to the Windows Path environment variables:
set PATH=C:\Ruby200-x64\bin;%PATH%
In the Ruby command you should write:
gem update --system
(this block of code updates all the gems in the Ruby)
Then you install sass like it:
gem install sass
(You said that you already has sass, so you don't need to write this code again.)
Then, you write this line:
gem install compass
(Now, you will have compass in your machine)
To know the version that was installed, you can write:
compass --version
To create a new project in your desktop machine, you can write this line of code:
compass create desktop/my-project
(This will create a compass folder in the desktop of your machine called my-project. I hope this is helpful.

Resources