After review, this question has been asked many, many, many times. Yet I still don't grok why rake assets:precompile fails.
I can view the following results from my browser using local server (e.g. thin):
body{
#include background-image(image-url('my_image.png'));
background-repeat: repeat;
...
...
}
(NOTE: image-path doesn't seem to work at all and I'm using thoughtbot bourbon as SCSS lib)
Yet every time I run precompile I get the following (short trace):
rake aborted!
images/my_image.png isn't precompiled
(in /path/to/myapp/app/assets/stylesheets/application.css.scss)
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
This post suggests that I change my production.rb file, which I did and it compiled my image and rake now complains that I have an undefined mixin 'border-radius'. Perhaps this was the next exception, but I am not so sure. And everything works locally.
Rails Guides (3.1.3) explicitly states setting the value to true
'uses more memory, performs poorer than the default and is not recommended'
So now I have two problems. Performance downgrade and my SCSS library now has undefined mixins.
I would like to solve the production deployment issue resulting from rake assets:precompile. My Gemfile asset group looks like this:
group :assets do
gem 'sass-rails', " ~> 3.1.0"
gem 'coffee-rails', "~> 3.1.0"
gem 'uglifier'
gem 'zurb-foundation'
gem 'bourbon'
end
If you go with the assets:precompile option, you should use #import statements in every stylesheet you use a mixin.
e.g.
Let's say you have a custom mixin in app/assets/stylesheets/partials/_mixins.css.scss that you use in a stylesheet, you should add
#import "partials/mixins";
to that stylesheet.
I know, is shouldn't be like that, but as for now, I haven't found any other way.
The image-path helper assumes the images part of the path so remove that (and the slash) and it should start working.
Related
I've gotten this weird error message that keeps me from working on my application.
undefined method `start_with?' for nil:NilClass
with line 5 highlighted in my app/views/layouts/application.html.erb file:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
The error seems to come out of nowhere. The first time I got it I had attempted to load CarrierWave. I got through ReadMe but it didn't work so I tried to back out of the installation.
When I comment out this line the app loads but with no bootstrap formatting at all. I initially focused my search with CarrierWave, deleted and re-installed the gem, but was unsuccessful and found nothing really pointing me in the right direction. I spent days on this. Finally, I reached out to a mentor who pulled my code down from github and found no errors. The app worked fine for him. I pulled down a previous, known working commit, and it worked for me as well. So, although not solved I could continue working on my app (having to re-do some work). Now, the problem has reappeared while working on my app. Not CarrierWave this time, just normal editing. Without warning the application just stopped loading but with the same start_with? error message on my app/views/layouts/application.html.erb file.
I've spent a considerable amount of time searching for answers and a permanent fix on Stackoverflow.
Solutions that seemed to work for others, but HAVE NOT worked for me are:
1. Remove //= require_tree . from application.js, and
2. Downloading and installing node.js
Some posts support the thought that the idea that the issue is local and would only show up in dev, not prod. I'm only working in dev at the moment. While there's a lot of other info, I've struggled with this for days now and feel that every possible solution gets me further down a rabbit hole that is completely foreign to me. I am a newbie...about 3 months into my knowledge on Ruby. I'm really not even sure what code to add here because I can't seem to isolate the issue. I only know that formatting seems to be affected when I comment out line 5 (as above).
Trust me when I say I've searched quite a bit. I'm very hard headed, but optimistic I can find an answer if given the time but I'm stumped here and just want to move on with learning to create with Ruby/Rails.
My gem file is below. Perhaps I'm missing something very obvious.
ruby '2.2.0'
source 'https://rubygems.org'
group :production do
gem 'pg'
gem 'rails_12factor'
end
gem 'font-awesome-sass'
gem 'bootstrap-sass'
gem 'simple_form'
gem 'devise'
gem 'seed_dump'
gem 'rails', '4.2.0'
group :development do
gem 'sqlite3'
end
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development, :test do
gem 'byebug'
gem 'web-console', '~> 2.0'
gem 'spring'
end
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
The only other info I can provide is that I've scaffolded my resources and used devise to create my User model.
Thanks. I'm in your debt if you can help me solve this. I am new, but I want to learn.
Thanks this helped me work out a bit more of whats going on. Seriously unhelpful error message.
Commenting out $icon-font-path in _variables.scss worked for me. If you have a look you will see that there is a [converter] comment that says:
If $bootstrap-sass-asset-helper if used, provide path relative to the
assets load path. This is because some asset helpers, such as
Sprockets, do not work with file-relative paths.
If you are not using the fonts just comment it out. If you need to use them set $bootstrap-sass-asset-helper to true and set the path as needed. That also worked for me.
It seems that the order is important here, the following order - if bootstrap-sprockets is defined before bootstrap - causes this error
#import "bootstrap-sprockets";
#import "bootstrap";
while this order seems to work
#import "bootstrap";
#import "bootstrap-sprockets";
I came across this same issue myself maybe my solution will help you out. Check your /app/assets/stylesheets/application.scss file for "bootstrap-sprockets". Commenting this out solved it for me.
Whether it's connected to the issue or not, uncommenting "bootstrap-sprockets", and changing the $icon-font-path and $icon-font-name to #icon-font-path and #icon-font-name (app/stylesheets/_variables.scss under Iconography) appeared to solve this and an additional issue I was having with glyphicons not displaying. Not sure exactly how but all appears to be working. The syntax errors in my controllers were likely coincidental. Although it wasn't the exact solution, #TheRealSeanReid pointed me in a direction that appears to have worked. Credit is deserved. Thanks #TheRealSeanReid.
I had this problem as well, but what was causing it was an incorrect value passed into an image-url() helper in a .scss file. We had background-image: image-url('./image.png'); instead of background-image: image-url('image.png');
In my case, the problem was actually that sprockets-rails was looking to load a non-existent path. This was happening because I passed a regex to the list of assets to precompile and sprocket-rails made a bad guess as to the asset's relative path. More information in this issue here:
https://github.com/rails/sprockets-rails/issues/269
bower-rails gem was causing it for me.
probable reason:
bower was attempting to load a non-existent path
just commented out the gem and its config files for now.
a precise probe to pin-pointing of the cause remains subject to available time. bower-rails is not so critical for the project right now.
I've just found what was wrong. The issue came with typescript compile.
Suppose that you have a function to give json response as following
const getSomething = () => {
return { a: 1, b: 2, c: 3}
}
And you might want to define variables like this
let something = getSomething()
let {a, b, c} = something
In my case, the above code made the issue in rails assets precompile for typescript, even though it's correct in syntax of it. But the following code does work properly
let {a, b, c} = getSomething()
I hope this would help someone who got this kind of issues.
Thanks
I am using RubyMine (v6.0.2), but my teammates are not, so they need the "debugger" gem in the gemfile. I can conditionally un-require the Gemfile when running RubyMine (so the Gemfile can be shared and identical), but since the 'debugger' gem is not included, the Gemfile.lock file changes depending on whether the project was last run with RubyMine or not. This creates a lot of noise in redundant Gemfile.lock changes.
I've tried using 'debugger-xml' gem; that doesn't solve the issue.
So -- how can I run RubyMine 6.0.2, with the 'debugger' gem in the Gemfile, without having Gemfile.lock change?
I've been working on this issue from the other side of the table. I use the debugger gem, but have team mates that use RubyMine.
We discussed several potential solutions but they all involved conditional checks in the Gemfile that would result in a modified Gemfile.lock.
I googled around for a better solution and found this SO post: How to use gems not in a Gemfile when working with bundler?
Combining a few of the answers in there, I came up with this solution:
Remove the debugger gem from the Gemfile.
Create a Gemfile.local with the contents below.
Add Gemfile.local to the .gitignore file if using git.
Create a function and shell alias.
Start rails with $ be rails s
How it all works!
Bundler will use the file named Gemfile by default, but this behavior can be overridden by specifying a BUNDLE_GEMFILE environment variable. Bundler will use/create the lock file with the same name as the BUNDLE_GEMFILE.
The shell function __bundle_exec_custom will check to see if there is a Gemfile.local file in the CWD. If there is, then the BUNDLE_GEMFILE variable is set and used. Otherwise, the default Gemfile is used.
This will allow a developer to use any gems that they want for local development without having to impact the application as a whole.
Gemfile.local:
source "https://rubygems.org"
gemfile = File.join(File.dirname(__FILE__), 'Gemfile')
if File.readable?(gemfile)
puts "Loading #{gemfile}..." if $DEBUG
instance_eval(File.read(gemfile))
end
gem 'debugger'
Function and shell alias:
__bundle_exec_custom () {
if [ -f Gemfile.local ]
then
BUNDLE_GEMFILE="Gemfile.local" bundle exec $#
else
bundle exec $#
fi
}
# Rails aliases
alias be='__bundle_exec_custom'
I think I found it. Apparently, RubyMine does not deal well with the debugger gem being required into the Rails app, but has no issue with the gem just being installed.
The solution then is to include the gem in the Gemfile (and Gemfile.lock) but only require it outside RubyMine.
gem 'debugger', {group: [:test, :development]}.
merge(ENV['RM_INFO'] ? {require: false} : {})
The above code is from this comment on the JetBrains bug tracker, through this comment on a similar question.
It checks for the presence of the RM_INFO environment variable, which is set by RubyMine. The important thing is that it only affects whether the gem is required and thus should not change Gemfile.lock between installs.
I may have an even better solution that seems to be working for me in my Rails 4 app...
In your Gemfile, move all your debugging-related gems to their own group, as such:
group :pry do
gem 'pry', '>= 0.10.0'
gem 'pry-debugger', '>= 0.2.3'
gem 'pry-highlight', '>= 0.0.1'
end
In config/application.rb you will a find something like the following:
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
Add the following just below that:
Bundler.require(:pry) unless ENV['RM_INFO'] || Rails.env.production?
You may wish to modify the unless condition to suit your needs, but the important part is that RubyMine will set RM_INFO, which you can use to detect and therefore exclude gems from being required.
This will eliminate the ping-pong effect of bundling in RubyMine vs. command line, so this should work well in a mixed-IDE team.
One last note, if you're deploying to Heroku, you might want to exclude the :pry group from being installed on deploy:
$ heroku config:set BUNDLE_WITHOUT="development:test:pry"
I've just started experimenting with Sinatra, deployed to Heroku, and so far I've been able to come to grips with the basics really quickly. Having said that, I'm a bit stuck on how to enable and use Stylus within my application.
Based on what I've read of the Sinatra documentation, this is how I've structured my very basic app.rb file:
require 'sinatra'
require 'stylus'
require 'stylus/tilt'
get '/' do
haml :index
end
In addition, here are the contents of my Gemfile:
source 'https://rubygems.org'
gem 'sinatra', '1.1.0'
gem 'thin'
gem 'haml', '>= 2.2.0'
gem 'stylus'
After using Bundler, and pushing my repo to Heroku it seems as though the necessary goodness is happening – console output shows that stylus, stylus-source and execjs (which I'm assuming is responsible for compiling the .styl files) are being included correctly.
My questions then are:
a) Where would the .styl files live? My current folder structure is:
app -
Gemfile
Gemfile.lock
Procfile
app.rb
public -
stylesheets
views -
layout.haml
index.haml
b) How do I compile/reference the .styl files? Linked in the head, referenced in the route, or ...?
a) I put any stylesheets (uncompiled) into app/views/stylesheets/.
b) You can either precompile them into app/public/css and then reference them the way you would reference any other external CSS, with a link in the head (which is how I do things) or, you can use the way you've set up for, by compiling via a route call, e.g.
get "/screen.css" do
stylus :"stylesheets/screen"
end
You will probably want to add in some kind of caching with this.
So I know that in a Gemfile I can do something like this:
group :development, :test do
gem 'gem1'
gem 'gem2'
end
What I am looking to accomplish is something like this:
group :production do
gem 'gem1'
gem 'gem2'
end
group :development, :test do
gem 'gem1', :path => '/Documents/Code/gem1/'
gem 'gem2', :path => '/Documents/Code/gem2/'
end
So our application uses 2 gems that we also develop locally. In order to improve time while developing on our local machines, we want to be able to point our dev environments to the local copies of the gems - this way it picks up all changes without needing to restart our rails server. Otherwise we would have to rebuild the gem, re-install the gem, and restart rails with every development change in the gem.
However, doing this gives me the following error:
You cannot specify the same gem twice coming from different sources. You specified that gem1 (>= 0) should come from an unspecfied source and source at /Documents/Code/gem1
I have tried even running something like bundle install --without production and I get the same error.
Does anyone know if it IS possible to do what I would like to do?
Thanks!
i think that there is a supported way to do it and some hacks to work around it.
supported way:
use bundle config with the local option as described here: http://bundler.io/v1.3/man/bundle-config.1.html
hacky way:
use env vars and execute bundler before using in production: http://www.cowboycoded.com/2010/08/10/using-2-sources-for-a-gem-in-different-environments-with-bundler/
there is a feature-request for this problem on github with several related issues and lots of comments: https://github.com/carlhuda/bundler/issues/396
the github issue phoet linked to is resolved, and is consistent with the supported way.
I dug around through the docs, you'll need to set the config variable and updated your gemfile to reference the branch as well.
e.g.
edit your Gemfile:
gem <gem_name>, git: <git_url>, branch: <branch>
on command line:
bundle config local.<gem_name> <local_path_to_gem>
I solved this by creating a new Gemfile that's identical to the original except for the target gem's source. Then, in config/boot.rb, I used:
require 'rails'
if Rails.env.development?
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../DevGemfile', __FILE__)
else
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../ProdGemfile', __FILE__)
end
I have searched and searched and all I could see was that to use compass with rails 3.1 was to just edit the Gemfile like so:
gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'
gem 'sass-rails', "~> 3.1.0.rc"
Yes I understand that but what next? Every tutorial I saw said just that, use that certain fork. But I am still having trouble with using compass with rails 3.1.
I did this:
$ compass init rails . --syntax sass
directory ./app/stylesheets/
create ./config/compass.rb
create ./app/stylesheets/screen.sass
create ./app/stylesheets/print.sass
create ./app/stylesheets/ie.sass
And since 3.1 was using assets now, I just transferred all those files to 3.1. Also, I am using compass-960 plugin, so where do I require it? I tried adding a compass.rb with require 960 and require html5-boilerplate and I still keep getting errors:
Error compiling asset application.css:
NoMethodError: undefined method `Error' for Compass:Module
(in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)
NoMethodError (undefined method `Error' for Compass:Module
(in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)):
I tried doing compass compile and it gave me this:
$ compass compile
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
As I said, I already edited my compass.rb so I am still stumped as to how to go about with this. Any help?
UPDATE: Seems like there is a better way !
Source: http://spin.atomicobject.com/2011/07/12/sass-sprockets-compass-with-rails-3-1/
UPDATE 2(dec 2, 2011): Chris Eppstein, creator of Compass posted this Github Gist of how to integrate Compass with Rails 3.1: https://gist.github.com/1184843
I now prefer this method over mine, as I noticed a great speed improvement at compilation time when using livereload.
MY METHOD:
(I now consider it deprecated, but maybe it can be useful in some cases, so here it is for reference:)
First, in your Gemfile, add:
gem "compass", "~> 0.12.alpha.0"
And don’t forget to execute a
bundle update
Then, in config/application.rb:
config.generators.stylesheet_engine = :sass
Rename application.css.scss to application.css.sass, or create it, and replace its contents by:
#import compass
#import _blueprint
(If you want to keep the new Rails 3.1 manifest code at the beginning of the stylesheet, you’ll have to replace the ‘/* */’ comments by the sass-syntax version ‘//’ at the beginning of each line)
Now, to test if compass and blueprint mixins work, add some code to the same file application.css.sass:
#import compass
#import _blueprint
body
background: black
+linear-gradient(color-stops(white, black))
+column(5)
Run your rails server with
bundle exec rails server
Load your app in a browser, and visit http://localhost:3000/assets/application.css
If everything went well, you should see the compiled code.
Source:
http://blog.pixarea.com/2011/07/using-compass-blueprint-semantic-and-sass-syntax-in-rails-3-1/
The solutions in the other answers are deprecated with the latest version of Compass, v0.12, which requires an adapter to work with a rails app. The Compass author, Chris Eppstein, has put installation instructions on github:
https://github.com/compass/compass-rails
This adapter supports rails versions 2.3 and greater
Peter Gumeson from the compass users groups pointed me to a fix for this:
https://groups.google.com/forum/#!msg/compass-users/mU5HBt8TCIg/2Rt7iSESTSAJ
Here's his message:
Hi gang. This github issue might help out.
https://github.com/sporkd/compass-html5-boilerplate/issues/19
I am pretty much running everything on edge right now. So my gemfile
looks something like this:
gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sass-rails', '~> 3.1.0.rc2'
gem 'haml', :git => 'git://github.com/nex3/haml.git'
gem 'haml-rails'
gem "compass", :git => "git://github.com/chriseppstein/compass.git", :tag => "0.12.alpha.0"
gem 'compass-html5', :git => 'git://github.com/sporkd/compass-html5.git'
I'm working on the rails generators right now, so it should not be too
far off. But this should at least get you going.
Peter
*changed branches as said by choonkeat
YOu can download the compass directory, dump it in vendor/assets/stylesheets so your directory structure is vendor/assets/stylesheets/compass Then from your main application stylesheets include the compass mixins ass required #include compass/reset;