How do I access the styles in a gem from my main application? I created a 'refinerycms-carts' gem and added this file:
refinerycms-carts/app/assets/stylesheets/application.sass
However, when I reload the page and search for the class in application.css in the browser (F12), it does not find it.
I tried adding this line to main app's app/assets/stylesheets/application.css.scss
#import 'refinerycms-carts';
But it gave an error "File to import not found or unreadable: refinerycms-carts."
I also tried naming the file carts.sass but still could not find the class I was referencing.
Yes I'm in development mode. Yes, other changes like controller or models or view are updated and reloaded.
Main app Gemfile: gem 'refinerycms-carts', :path => '../refinerycms-carts'
This is in my refinerycms-carts.gemspec: s.files = Dir["{app,config,db,lib}/**/*"] + ["readme.md"]
This is in my gem Gemfile: gem 'sass-rails'
The gem acts as an Engine.
Rails 3.2.14.
I had to add this in one of my Gem's views:
-content_for :stylesheets, stylesheet_link_tag('refinery/carts')
I also renamed the file to app/assets/stylesheets/refinery/carts.sass. There was already a yield :stylesheets in the app's layout.
Related
I have install "Tinymce" though bower into my rails app in vendor/assets/bower_components/tynymce-dist
I include js assets in application.js and it works ok
//= require tinymce-dist
then I include css files in application.css
#import 'tinymce-dist/skins/lightgray/skin.min.css'
it works, but I have an error in rails console
ActionController::RoutingError (No route matches [GET] "/assets/skins/lightgray/skin.min.css"):
and in chrome console
GET http://localhost:3000/assets/skins/lightgray/skin.min.css
it calls from tinymce script in that way
skinUrl = tinymce.baseURL + '/skins/' + skin;
looks like it calls absolut url.
One solucion is to use Tinymce gem, but I dont want to use this way.
How to fix this problem.
If you're using Bower in your Rails app, you'll do well looking into Rails Assets:
This basically allows you to include bower-enabled assets as gems. You just have to search for the respective gem on their app, and then add the gem to your Gemfile:
RA actually have TinyMCE-dist already:
I would personally recommend using Rails Assets - I can delete the answer if you'd rather not. It will give you the benefits of bower and the dependability of the gem system:
#Gemfile
source https://rubygems.org
source https://rails-assets.org #-> add this line
gem 'rails-assets-tinymce-dist'
Then add the following to your JS & CSS assets:
#app/assets/javascripts/application.js
//= require tinymce-dist/tinymce.js
#app/assets/stylesheets/application.css
#import 'tinymce-dist/skins/lightgray/skin'
When I'm launching my Rails 4 app in development mode – everything works fine, but when I'm trying to precompile assets and then run it in production – my images couldn't be founded on a server.
The problem is in the image request url: it has no fingerprint on the end.
For example, my precompiled image lay at the /assets/image-12rfh98hf734hgf973.png and the request is just the /assets/image.png.
So, the question is how do I write my code inside sass file's to route the correct image?
My gemfile is
gem 'rails', '4.0.1'
gem 'sass-rails', '~> 4.0.0'
gem "compass-rails"
gem 'haml-rails'
I'm trying this code, but it doesn't produce fingerprint in compiled css:
#include background(image-url("baloon_big.png"));
and some variations of image-url, like image-path, image_path etc.
In Rails 3 I hadn't faced this problem, so may be the problem is in the gems.
Thanks in advance.
EDIT
Figured out that problem is only in my work machine – I'm deployed my app to heroku and paths resolving fine (with fingerprints). The question is still open – what's wrong with me (and my computer).
First of all this is my first time posting a question on StackOverflow. I'm a big fan. Anyway:
I was doing the Rails Tutorial by Michael Hartl when, after editing the custom.scss.css file, I suddenly got this error:
SASS Syntax error
Undefined variable: "$gray".
(in /home/shady/workspace/ruby/sample_app/app/assets/stylesheets/custom.css.scss:4)
This isn't a problem with $gray; it is the correct way to spell and capitalize the gray SASS variable (I checked, and it works in another rails project). I simplified the custom.scss.css file to pinpoint this error, so all it contains is this:
#import "bootstrap";
h1 {
color: $gray;
}
In my Sample App (the rails tutorial app), I still get this error, but when I use this exact same code in another rails project that I created (to practice the things I learned in the Rails Tutorial on my own, so it pretty much mimics the Sample App), with the exact same gemset and Gemfile, this works perfectly fine. Here is my Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
#ruby-gemset=SecondTry
gem 'rails', '4.0.2'
gem 'bcrypt-ruby', '~> 3.1.2'
group :development, :test do
gem 'sqlite3', '1.3.8'
gem 'rspec-rails', '2.13.1'
gem 'guard-rspec', '2.5.0'
gem 'spork-rails', '4.0.0'
gem 'bootstrap-sass', '2.3.2.0'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
gem 'libnotify', '0.8.0'
gem 'factory_girl_rails', '4.2.1'
end
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '>=4.0.0'
gem 'jquery-rails', '>=3.0.4'
gem 'turbolinks', '2.2.0'
gem 'jbuilder', '1.0.2'
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'pg', '0.15.1'
gem 'rails_12factor', '0.0.2'
end
This was working perfectly fine the last time I edited custom.scss.css, and I haven't done anything substantial since then. I haven't (at least purposefully) edited any file that I think would cause this. I've tried uninstalling and reinstalling bootstrap-sass, but it hasn't worked. I believe it's a problem with SASS, but as I'm a rails newbie I have no clue on how to fix it. Any advice?
FIXED IT HAHAHAHAAAAAAA
It was because, for some stupid reason, I added an assets folder in the /vendor directory (probably testing something else out), and it seems that rails checks this directory for any external stylesheets and if it finds that it exists it loads from there instead of the gem (?), which is why bootstrap wasn't even processed by the Rails asset pipeline. The assets folder was empty save for a stylesheets and js folder. Once I deleted the assets folder the application started working again.
You need to defined your $grey var somewhere. In my rails projects i usually set a _colors.scss partial where i defined all my var and then i import them before bootsrap so i can override them if i need.
$grey:#EEEEEE;
I don't see any $grey var in the bootstrap var list (http://getbootstrap.com/customize/#less-variables).
Another idea, i don't know how you call your stylesheet in your layout. But maybe if you call application.scss only, there might be a missing *= require where your $grey is defined.
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...
Yesterday I decided to give Foundation a try on one of my web apps. Everything worked fine as I was in localhost, but when I pushed the new changes to my EC2 instance, continuing to follow the Zurb Foundation instructions, I ran into this error:
Sass::SyntaxError in Home#index
Showing /var/www/brain_db/app/views/layouts/application.html.erb where line #18 raised:
File to import not found or unreadable: foundation/foundation-global. Load path: Sass::Rails::Importer(/var/www/brain_db/app/assets/stylesheets/foundation_and_overrides.scss) (in /var/www/brain_db/app/assets/stylesheets/foundation_and_overrides.scss)
As a newbie to Ruby on Rails and Foundation I'm really unsure of how to resolve this problem. I found many people with similar problems through a Google search, but their situations were slightly different which makes this hard for me to diagnose. Any advice?
I was getting this same error, and it turned out that I just needed to restart my local development server.
This is a result of running rails g foundation:install with a different version of foundation than the one you have installed. foundation-global is no longer imported as part of foundation_and_overrides.scss.
Make sure you have the latest version and re-run rails g foundation:install. Just be careful when it offers to overwrite your application layout file - if you had modified that file. Keep the old file somewhere and merge the changes.
If you are using sass then have you renamed your application.css to applications.scss and have you imported the file #import "foundation"; and one more point if you are using the gem 'zurb-foundation', '~> 4.0.0' then you have to place it under assets like this
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
# Add Foundation Here
gem 'zurb-foundation', '~> 4.0.0'
end
I also had this problem with Foundation + Bower + CodeKit.
I fixed it by replacing the following relative paths in app.scss:
BEFORE:
#import "_settings";
#import "foundation";
AFTER:
#import "_settings";
#import "../bower_components/foundation/scss/foundation";`
And also replace this in settings.scss
BEFORE:
#import 'foundation/functions';
AFTER:
#import "../bower_components/foundation/scss/foundation/_functions";
Something is the matter with your zurb-foundation gem installation. There is supposed to be a file called _foundation_global.scss in the gem's directory which contains all the default global variables. You'll get this error if that file is missing.
Reinstalling the gem should fix you right up, in your app's directory run:
gem uninstall zurb-foundation
bundle install
If that fails, manually installing the Gem (gem install zurb-foundation) might work as well.
I experienced this problem today when updating zurb-foundation to version 4. It may be that your EC2 instance has a later version of Foundation installed. If so, I recommend updating your local development environment. My experience doing this might help ...
It seems that the #import 'foundation/foundation_global'; at the head of the foundation_and_overrides.scss, is no longer required. Instead, a single #import 'foundation'; at the foot of the same file is required.
Also, I had to change my application.js file to include only the lines (relevant to foundation);
//= require foundation
$(function(){ $(document).foundation(); });
I had tried to re-run the Foundation generator that is recommended here but it seems to assumes that it is working on a new project and simply appends the new JavaScript method, as opposed to replacing the previous.