I downloaded the SpaceLab theme from sass-bootswatch.theblacksmithhq.com and in part of the file it has
// FORMS
// -----------------------------------------------------
.control-group.warning {
#include formFieldState(#E29235, #E29235, $warningBackground);
}
.control-group.error {
#include formFieldState(#C00, #C00, $errorBackground);
}
.control-group.success {
#include formFieldState(#2BA949, #2BA949, $successBackground);
}
// DROPDOWNS
// -----------------------------------------------------
When I run rake assets:precompile or just put up a rails server I get this error Undefined mixin 'formFieldState'.
This began after I added active admin. My application.css file looks like this by the way.
*= require_self
*= require variables
*= require base
*= require devise
*= require nav
*/
I can remove the section from the variables file and it will run but my styles look really bad almost like bootstrap is not running.
My Gemfile looks like this:
gem 'rails', '3.2.13'
gem 'devise'
gem 'omniauth-google-oauth2'
gem 'decent_exposure'
gem 'turbolinks'
gem 'simple_form'
gem 'activeadmin'
gem "meta_search", '>= 1.1.0.pre'
gem 'jquery-rails'
#TODO needed for the server
gem 'mysql'
group :production do
# needed for heroku
#gem 'pg'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'sass-rails'
gem 'bootstrap-sass'
#TODO needed for the server
#gem 'execjs'
#gem 'therubyracer'
end
group :development, :test do
gem 'certified'
gem 'better_errors'
gem 'factory_girl_rails'
gem 'pry-rails'
gem 'pry-stack_explorer'
gem 'pry-debugger'
gem 'awesome_print'
gem 'quiet_assets'
gem 'rspec-rails'
gem 'heroku'
end
group :test do
gem 'sqlite3'
end
If there is anything else that would help you understand please let me know.
I have two explanations - I think both of them apply to you:
You have not specified a version for the 'bootstrap-sass' gem in your Gemfile. Your SpaceLab theme seems to be based on Bootstrap 2 while the current version of the 'bootstrap-sass' gem is 3.0.2.1, which ships Bootstrap 3.0.2, which is not compatible with SpaceLab (and the mixin doesn't exist anymore). Maybe you "accidentally" upgraded bootstrap-sass when installing Active Admin.
Another problem is accessing SASS variables and mixins when using the Asset Pipeline (Sprockets), as described here. If you use //=require for importing stylesheets (e.g. for importing Bootstrap and your theme from separate files in your application.css) you cannot access SASS variables and mixins between files because Sprockets compiles each file separately. The only option you have is to import Bootstrap and your theme via the Sass #import one after another in one SASS file to make sure they're able to access each others' variables and mixins, like (just exemplarily):
#import "spacelab-variables";
#import "bootstrap";
#import "spacelab-theme";
Related
My app works locally; however, when I try to deploy it to Heroku I get the following error:
remote: Sass::SyntaxError: File to import not found or unreadable: bootstrap/dist/css/bootstrap.
remote: (sass):18
.....
remote: /tmp/build_c0c6ec9ea8e1ea183aca6e660993c246/vendor/bundle/ruby/2.2.0/gems/sprockets-rails-3.0.1/lib/sprockets/rails/task.rb:67:in `block (2 levels) in define'
remote:
Sass::SyntaxError: File to import not found or unreadable: bootstrap/dist/css/bootstrap.
.....
remote: Tasks: TOP => assets:precompile
remote: (See full trace by running task with --trace)
remote: !
remote: ! Precompiling assets failed.
remote: !
Here are the application.scss, and Gemfile files in order:
application.scss:
*= require_self
*= require custom
*= require template
*/
#import "bootstrap-sprockets";
#import "bootstrap";
Gemfile:
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.3'
# Specify Rake version
gem 'rake'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use bootstrap sass?
gem 'bootstrap-sass', '>= 3.3.6'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# For user authentication and registration
gem 'devise'
# Font Awesome and simple form
gem 'simple_form'
# For static pages
gem 'high_voltage'
gem 'paperclip', '~> 3.5.3' # github: 'thoughtbot/paperclip
gem 'closure_tree'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
gem 'rspec-rails'
gem 'capybara'
gem 'launchy'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
and my vendor/assets folder looks like this:
UPDATE - changes made to my application.scss are not being pushed up to Heroku. I assume this because even when I take out all the requires and imports, the Heroku precompile still seems to be looking for (and not finding) bootstrap !
Any help is appreciated - let me know if I have missed out anything!
Thanks in advance.
You need to import the bootstrap file like this in application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use #import to import Sass files.
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables. See the sass-rails gem documentation for more information on this.
Run $ rake assets:precompile
Run $ git add --all
Run $ git commit -m 'switched to import syntax'
Run $ git push heroku master
I remember this error back when I used to work on ROR. The issue has to do with the production.rb file inside your config folder.
Make sure this line is made true.
config.assets.initialize_on_precompile = true
Rails comes bundled with a task to compile the asset manifests and other files in the pipeline.
Compiled assets are written to the location specified in config.assets.prefix. By default, this is the /assets directory.
The issue was that I was making changes while on the develop branch and trying to push them, not realising that (NEWBIES TAKE NOTE) when you do git push heroku master it actually only ever pushes from your local master branch.
So I merged all my changes into my master branch and pushed. Problem solved.
If your setup is similar to mine please take note of the other answers because I am sure taking on those suggestions means I avoided some other errors in my code.
I am using Ruby -v 2.2.1 and Rails version 4.2.4 with gems haml, simple_form, and bootstrap-sass indicated below. I consistently get the following error:
Sprockets::FileNotFound in Static_page#index
The error also indicates that it could not find my file in javascript/application, more specifically this is what I have app/assets/javascripts/application.js:
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
In addition, I have these included as well in application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I also have the following included in my application.css.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
And here are the gem files I am using:
gem 'rails', '4.2.4'
gem 'sqlite3'
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
gem 'haml', '~> 4.0', '>= 4.0.7'
gem 'simple_form', '~> 3.2', '>= 3.2.1'
gem 'bootstrap-sass', '~> 3.3.6'
group :development, :test do
gem 'byebug'
end
group :development do
gem 'web-console', '~> 2.0'
gem 'spring'
end
I have already conducted a bundle install and restarted my rails sever several times to try to troubleshoot.
Why does this error keep occurring and might there be some kind of incompatibility with my gems' versions? Thank you.
The error simply states that it cannot find the JS file which has been called in application.js.
According to the docs, you need to have the following in your JS pipeline to get it working:
//= require jquery
//= require bootstrap-sprockets
Referencing bootstrap-sass/assets/javascripts/bootstrap-sprockets seems to violate that pattern (remember, asset_path acts like a PATH env var -- you can reference individual files without the relative path).
For me, this happened after upgrading to rails 7, and was because rails 7 doesn't come with Sprockets.
I fixed by adding sprockets and everything worked:
# Gemfile
gem "sprockets-rails"
More info here
This question already has answers here:
Does compass-rails support Ruby on Rails 4.0?
(6 answers)
Closed 9 years ago.
I read that compass for rails 4 is not ready, but its work with "2.0 alpha"... I don't understand.
Has anyone solved this problem it?
my Gemfile
gem 'sass-rails'
gem "compass-rails" #or gem "compass-rails", "~> 2.0.alpha.0"
my application.css.scss //no error, rails recognize the directory
#import "compass";
my error for my first mixin test
Sass::SyntaxError at /partners/dashboard
Undefined mixin 'border-radius'.
Not ready for Rails 4.0:
http://ready4rails4.net/gems/compass-rails
And the contributors were clear on that 9 months before Rails 4 dropped:
https://github.com/Compass/compass-rails/pull/59
I have updated from Rails 3.2 to Rails 4.0 including the gem compass-rails. I have pasted in my gem file below.
I updated as many gems as possible but a couple could not get very latest versions.
The command "bundle outdated" gives you an idea about outdated gem
Pierre
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails_12factor', group: :production
gem 'rails', '4.0.0'
gem 'pg'
gem 'thin'
# do I need this gem for form backing objects
gem 'virtus'
gem 'jbuilder', '~> 1.2'
gem 'sass-rails', '~> 4.0.0'
gem 'coffee-rails', '~> 4.0.0'
gem "compass-rails", '~> 2.0.alpha.0'
gem 'uglifier', '~> 2.2.1' # java script compression
gem 'rspec-rails'
gem 'debugger'
gem 'better_errors' # railscast 402
gem 'binding_of_caller'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'bcrypt-ruby', '~> 3.0.0'
# tried this update but got errors so backed out
# gem 'bcrypt-ruby' '~>3.1.2'
# paging, searching
gem 'will_paginate', '~> 3.0'
gem 'ransack'
gem "redcarpet", '~> 3.0.0'
gem 'cancan'
gem 'simple_form'
# For drill evaluation- railscast 326
gem 'active_attr'
# For db population
gem 'seed_dump'
# longitude and latitude
gem 'geo_position'
It's not good to use #import in a .css file. You need to rename it to application.css.scss. But I prefer to import compass directly in the files where I need it. And Also I prefer to import only the parts I really need like compass/css3 so that I don't include anything I don't really use.
If that does not help with your problem, you might need to paste in the /partners/dashboard styles to see what's in there.
I'm developing my first Rails Engine. It's an admin panel layout with assets and basic functionality.
What I really want is for it to be based on Twitter Bootstrap + SASS.
If I just have these lines in my gemspec file of my engine:
gem.add_dependency "railties", "~> 3.2"
gem.add_dependency "sass-rails"
gem.add_dependency "bootstrap-sass"
I get this error when trying to access a page:
ActionView::Template::Error (couldn't find file 'bootstrap'
(in /Users/swamiatma/Documents/Dropbox/coding/ruby/gems/tkh_admin_panel/app/assets/javascripts/admin.js:9)):
However if I add this to the host application gemfile:
gem 'bootstrap-sass'
So that I get the following lines:
group :assets do
gem 'jquery-rails'
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'bootstrap-sass'
end
It now works fine. I think this dependency belongs strictly to the Rails engine gem and should just be there.
What gives?
Take a look at 'rails-admin' engine. It is using 'bootstrap-sass' and it requires it in engine.rb : https://github.com/sferik/rails_admin/blob/master/lib/rails_admin/engine.rb
For future reference, the important line in rails_admin/engine.rb (at least in my case) was the following:
require 'bootstrap-sass'
After I added this to my engine.rb, the error went away for me.
Sprockets seems to make an error in determining the logical_path of my javascript assets (except for application.js). It prepends "../javascripts" to the path and so my references are wrong and the application.js file won't precompile. I'm using Rails Thin server on Windows.
Gemfile:
source 'http://rubygems.org'
gem 'rails', '3.1.3'
gem 'eventmachine', '1.0.0.beta.4.1'
gem 'thin'
gem 'mysql'
gem 'win32-open3-19'
gem 'paperclip', '2.3.8'
gem 'jsmin'
gem 'will_paginate'
gem 'jquery-rails'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.1.5'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
end
group :test do
# Pretty printed test output
gem 'turn', :require => false
end
I've created a new app and on it's own, there are no problems. It's only when I copy the files from my current app over that the problem starts. I've tried disabling all extraneous gems but the problem persists (leading me to believe it's not a gem that's causing the problem).
Wow. Apparently Sprockets pukes invisible chunks when it finds a folder called "java" under "assets" and simply doesn't process anything else from that point forward for js files. Under /assets I had "images", "javascripts", "java" (for java applets) and "stylesheets". Changing "java" to "applets"
"FIXED"
the problem.