I am generally confused about Rails 3.2, Sprockets, and Compass.
At the top of this article, it says *= require directives, are no longer needed using Sass-Rails, just use #import instead. The Sass-Rails Github talks about a little about glob #import feature, but doesn't talk at all about #import being the new *= require. Which one or combo :(
do I use?
Having coderay.css.sass in vendor/assets/stylesheets and using #import in application.css.sass will import my_coderay.css.sass?
I don't know because I'm using Compass Mixins in my_coderay.css.sass (thus putting a #import "compass/css3" at the top of that file) and I'm getting an error:
"File to import not found or unreadable: compass"
In this article it talks about configuring Rail's Sass engine to know about the assets path. But I thought Sass-Rails already teaches #import where asset path is?
Also when I try to include the 31 branch of compass...
gem 'compass', :git => 'git://github.com/chriseppstein/compass.git', :branch => 'rails31'
I get errors...
Using compass (0.12.0.alpha.0.22e2458) from git://github.com/chriseppstein/compass.git (at rails31) /Users/george.norris/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:in `initialize': No such file or directory - /Users/george.norris/.rvm/gems/ruby-1.9.2-p180/bundler/gems/gems/compass-0.12.0.alpha.0.22e2458/bin/compass (Errno::ENOENT)
And finally, if I take coderay.css.sass out of vendor/assets and put it in app/assets I don't get the above error. But I getting it's spitting out errors in public/application.css.css (.css.css ???)
Syntax error: File to import not found or unreadable: base.
Load paths:
Compass::SpriteImporter
/Users/geonorr/Sites/quasar/public/stylesheets/sass
/Users/geonorr/Sites/quasar/app/assets/stylesheets
/Users/geonorr/.rvm/gems/ruby-1.9.2-p180/gems/compass-0.11.5/frameworks/blueprint/stylesheets
/Users/geonorr/.rvm/gems/ruby-1.9.2-p180/gems/compass-0.11.5/frameworks/compass/stylesheets
on line 3 of /Users/geonorr/Sites/quasar/app/
I am using Rails (3.1.0), Sass (3.1.7), Sass-Rails (3.1.0), Compass (0.11.5)
Thanks for the response. Feel like I am getting closer...
Including Compass Master Branch and getting this error:
gem 'compass', :git => 'git://github.com/chriseppstein/compass', :branch => 'master'
Using compass (0.12.alpha.0.d03d529) from git://github.com/chriseppstein/compass (at master) /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:in initialize': No such file or directory - /Users/gnee/.rvm/gems/ruby-1.9.2-p180/bundler/gems/gems/compass-0.12.alpha.0.d03d529/bin/compass (Errno::ENOENT)
from /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:inopen'
from /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:365:in shebang'
from /Users/gnee/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:456:inapp_script_text'
*= require comments can be seen as a hacky workaround from the perspective of Sass, because Sass has a dedicated language feature for that: the #import directive. #import tells Sprockets what to do. When you are migrating from a Rails 3.0 project, leave all #import statements as they are. At the moment, the only gotcha is "globbing": How to tell Rails/Sprockets to regard also other Sass files than application.css.s(ac)ss.
Here is the latest Compass installation guide for Rails 3.1. It also tackles the globbing problem.
As it is said in the Rails Guide, app/assets, lib/assets or vendor/assets directories in your app as well as in your gems/engines are included in Rails.application.config.assets.paths. I verified that +opacity(.5) from the compass/css3 library works as expected if you install compass properly. Which leads us to the next point:
The rails31 branch is merged into master now and version 0.12.alpha has been released that should support Rails 3.1. However, this is version is not yet without bugs. So I recommend to rely on the newest master revision:
gem 'compass', git: 'git://github.com/chriseppstein/compass', branch: 'master'
The only bug I am encountering at the moment is a "undefined method nil.[]" Exception when trying to compile statements that create sprites. See this issue. A workaround for that is to set sass_options = {quite: true} in your config/compass.rb
Further note: I do not have Sass in my Gemfile any more. I think you can remove that dependency when relying on sass-rails.
Related
I have a rails-application (rails 5.2) with opal (0.11.1) running.
I would like to use erb-templates on client site. I followed the steps described in the official opal-docs (http://opalrb.com/docs/guides/v0.11.1/templates.html), but requiring the opalerb-file fails. sprocket claims the file could not be found:
couldn't find file 'views/user' with type 'application/javascript'
File views/user.opalerb exists.
It seems that sprockets does not handle / recognize opalerb-files, although I don't find a hint that things have to be configured.
How can I make opal with sprockets find and compile this file?
I ran into the same problem (Rails 5.2.2, Opal 0.11.4). The "opalerb" extension was not being correctly registered with Tilt and Sprockets. I addressed this locally by creating a file called "opal.rb" in config/initializers with one line:
require 'opal/sprockets/erb'
Alternatively, I was also able to fix the problem by explicitly including "opal-sprockets" in my Gemfile, pulling directly from the master branch in Github:
gem 'opal-sprockets', git: 'https://github.com/opal/opal-sprockets.git'
The final option seems to be to include "opal-haml" (even if you don't intend to use HAML). This seems to trigger initialization, although I haven't investigated why.
gem 'opal-haml'
I'm trying to wrap the bootstrap-sass gem inside another gem (let's call it my-engine). Along the way, I'm building a small Rails application to test things out. As a first step, I wanted to make sure I could get bootstrap-sass working directly in my Rails application. The Gemfile for the Rails app looks like this:
gem 'bootstrap-sass', '3.3.1.0'
gem 'my-engine, path: "~/dev/my-engine"
This works fine. The bootstrap assets are loaded into my Rails application and everything looks good. Now, I want to take bootstrap-sass out of my Rails app and let it load through my-engine. So, my Rails application Gemfile now looks like:
gem 'my-engine, path: "~/dev/my-engine"
The .gemspec for my-engine has:
spec.add_runtime_dependency 'bootstrap-sass', '3.3.1.0'
I can re-bundle the my-engine gem with no problems. I can re-bundle the Rails application with no problems. However, when I refresh the page of the Rails app, I get the following error:
File to import not found or unreadable: bootstrap-sprockets.
That break occurs when sprockets is trying to build the application.css file. Sometimes this will pass and I'll get a different error about missing the bootstrap.js javascript file when the application.js is being built.
Why is this happening? I'm wondering if it has something to with the fact that I'm developing the gems locally and haven't published them, although I'm not sure why that would affect bootstrap-sass which is published. I'm using bundler 1.5.3.
Make sure 'bootstrap-sass' is required in your engine. One sensible place to do this is in your lib/my-engine.rb file:
require 'bootstrap-sass'
Adding the bootstrap-sass gem as a runtime dependency in the .gemspec isn't enough when you're trying to wrap gems.
As you want to use more and more scss/js/coffeescript libraries, you may want to consider moving to bower vs gemfiles as the source for bootstrap-sass-official. We use bower-rails for rake tasks and auto-configuration. It's a really lite config/rake task layer over standard bower.
Addressing your answer, bootstrap problems via the gem was one of the reasons I switched our engine over to just bower assets. We now import bootstrap-sass-official and have full control, note however that for sass files you will need to import the longer path to the source file, i.e. in our engine _application.scss:
# our custom variable overrides
#import 'overrides/variables';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
NOTE: if you want your app sass variables to override engine and sass variables, make sure your engine has _application.scss not application.scss, the leading underscore is critical for variable context/scope.
Thinking ahead, you may need to ignore bower transitive dependencies as we did.
(i.e. some dependencies may use 'bootstrap' while others use 'bootstrap-sass-official' etc)
We use it like this in our .bowerrc such as the following:
{
"ignoredDependencies": [
"bootstrap",
"bootstrap-sass",
"bootstrap-sass-official"
]
}
In conclusion
We have been using this for several months with success. bower-rails will install the dependencies in /vendor/assets and if referenced in your engine, you won't need to reference them at all in your application project. It has been fast and easy to maintain/add/update libraries and know exactly how files are included.
I have a working Rails 4.0 + Bootstrap 2.3 application. Now I want to update to Rails 4.1.
After updating the gems and starting the server, I receive this message:
Sass::SyntaxError - File to import not found or unreadable: bootstrap-responsive.
It point to a line in bootstrap_and_overrides.css.scss where I have this:
#import "bootstrap";
#import "bootstrap-responsive";
Both files are in the assets/stylesheets folder. When I remove the last import, the application starts, but I miss a lot of styling. What is going wrong here, any ideas?
I made 2 mistakes with this: first I did a bundle update instead of bundle update rails, so that all gems where updated, also the bootstrap and sass related gems. The second error was that I didn't have specific version numbers for the bootstrap and sass related gems in my Gemfile.
The solution was simple: remove the branch, create a new one, check Gemfile.lock for the current versions of all bootstrap and sass related gems and add these to Gemfile. Then do a bundle update rails and sit back and enjoy!
I'm trying to create a gem which represents a JS and CSS library and can be included in rails projects (currently using 3.2). All the style sheets are written in SASS and depend on the compass library.
I tried adding compass-rails to the Gemfile of the "external" gem and including it in the gems SASS files using
#import "compass"
However, back in the rails application (which has a dependency to this gem), this results in an error message:
File to import not found or unreadable: compass.
Am I doing something wrong?
Update: It seems to work if I add gem compass-rails to the Gemfile of the rails application. Any change to work around that?
Thanks a lot for your help!
Besides adding compass-rails to the Gemfile of the gem, you also need to require 'compass-rails' somewhere, adding it to lib/your_gem_name.rb inside the gem worked for me.
I'm using Spree 0.70.3, Rails 3.1.3, and a custom fork of the Spree Editor plugin. (N.B. the relevant code for this fork hasn't changed from master.)
When I request a page which should get TinyMCE on a text area, I see this error in my development log:
Error compiling asset admin/all.js:
Sprockets::FileNotFound: couldn't find file 'tinymce-jquery'
(in <gemset-path>/bundler/gems/spree_editor-48cdfcfaf7bd/app/assets/javascripts/admin/spree_editor.js:9)
The line in question looks like this:
//= require tinymce-jquery
The editor depends on the tinymce-rails gem, which has a few candidates for the file in question:
assets/vendor/tinymce/jquery-tinymce.js
assets/precompiled/tinymce/jquery.tinymce.js
assets/precompiled/tinymce/tiny_mce_jquery.js
assets/integration/tinymce-jquery.js
The README for that gem says the require line quoted above is correct, however. None of the gem's paths are in Sprockets' search path as shown by putting Rails.application.config.assets.paths into the console.
Should I be adding the gem's path to the Sprockets search path somehow, or is this something the gem isn't doing correctly?
I assume you cannot precompile the gem, I had a similar issue so what i did was to download the javascript plugin from the site manually and copied the directories into my rails app. or i also tried to use a lower version of tinymce-rails gem and it worked.