I'm using the bootstrap-sass gem with my rails (3.2.5) app, and things are working great in my local dev environment. But when I deploy to prod on Heroku the bootstrap CSS isn't included in the compiled assets.
I added bootstrap-sass and sass-rails to my Gemfile:
gem 'bootstrap-sass', '2.0.3.1'
group :assets do
gem 'sass-rails', '3.2.4'
end
And I added an import for Bootstrap to a custom.css file in my assets dir:
#import "bootstrap";
Basic stuff. Any idea why this isn't working in Prod?
I was running into exact same problem. These are the steps I followed to resolve the issue:
Add " *= require bootstrap" right above " *= require_tree ." in application.css.
Then I did "bundle install --without production"
Then I ran "rake assets:precompile"
Then I did git add .
Then I committed the changes git commit -m "blah..."
Then push changes to production "git push heroku master"
You must add a bootstrap_and_overrides.css.scss file in your app/assets/stylesheets with the next:
// Set the correct sprite paths
$iconSpritePath: asset-url('glyphicons-halflings.png', image);
$iconWhiteSpritePath: asset-url("glyphicons-halflings-white.png", image);
#import "bootstrap";
#import "bootstrap-responsive";
Also, you must add in your application.js:
//= require bootstrap
Regards!
Related
I have a Rails 5.0.0.1 app on Heroku and when I hit the developer console in Chrome and open up the CSS and JS files I can see that neither of them have been minified. This was first brought to my attention after completing a Google speed test.
This is what some of my setup looks like...
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require bootstrap-sprockets
//= require trix
//= require_tree .
application.scss
//Import bootstrap-sprockets
#import "bootstrap-sprockets";
// Import cerulean variables
#import "bootswatch/flatly/variables";
// Then bootstrap itself
#import "bootstrap";
#import "font-awesome";
// Bootstrap body padding for fixed navbar
/*body { padding-top: 60px; }*/
// And finally bootswatch style itself
#import "bootswatch/flatly/bootswatch";
// Whatever application styles you have go last
#import "overrides";
#import "trip";
I'm using the following gems:
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootswatch-rails'
gem 'bootstrap-social-rails'
gem 'bootstrap_form'
And I have the following options set in production.rb
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
I've precompiled and cleaned the assets and I've even bumped the assets version using
Rails.application.config.assets.version = '1.1'
I even nuked hell out of my assets folder using rake assets:clobber
Really at a loss now as to why none of these assets are minifying. Any help is much appreciated.
What's your Gemfile look like? Is there a JavaScript runner for the uglifier? therubyracer is often used, and I have been fairly happy with mini_racer and its enhanced performance.
In your Gemfile:
gem 'mini_racer'
Then run bundle install and commit.
To summarize the conclusion from my and OP's comments on the main post, the issue was not that minification isn't working, but that the minified assets weren't being used. This is because the assets at one point had been precompiled into public/assets and checked into Git; the public, unminified assets then took precedence over the minified assets when being served.
The solution, then, was to remove those artifacts from Git:
git rm -r public/assets
Checking precompiled assets into version control is generally discouraged, although it depends on your deployment system. With Heroku, there's usually no need. See Do you add public/assets in version control? for more details.
I have built a Rails 4 and I am now trying to deploy to Heroku.
When I run the git push heroku master command, the process shuts down when Heroku runs rake assests:precompile. I get the following error message:
Sass::SyntaxError: Invalid CSS after "... "bootstrap" */": expected "{", was ""
I am at a loss of where to find this error in my code. I have included the bootstrap-sass gem in my gem file, but I have also included the entire css folder from the download provided by Bootstrap in my assets/stylesheets folder.
Below is what I have required in my application.css.sass file:
*= require font-awesome
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
As a final note, I have also precompiled locally using the rake assets:precompile command. In addition, I have set config.assets.compile equal to true in my application.rb file, as well as uncommenting config.assets.css_compressor = :sass.
Any guidance would be greatly appreciated.
Remove the */ from your code (right below *= require_self). That is what the error is referring to (though it isn't very clear).
I'm trying to use the bootstrap_form ~> 2.0.1 gem (see https://github.com/bootstrap-ruby/rails-bootstrap-forms) but it's giving me fits. I've installed is as per the instructions on their github page, adding it to my Gemfile:
gem 'bootstrap_form', '~> 2.0.1'
I ran bundle install. I then added it to my application.css.scss file:
*= require_self
*= require rails_bootstrap_forms
*= require_tree .
But, when I try to run my app I get:
couldn't find file 'rails_bootstrap_forms' (in /path/to/my/app/assets/stylesheets/application.css.scss:12)
I'm obviously missing something. I checked lib/assets/ and vendor/assets/stylesheets/ but there's nothing there. Likewise, there's nothing in app/assets/stylesheets/.
What the fudge?
I had some trouble with this, partly (I think) because they renamed the gem. What seemed to make the difference for me was to have bundle grab the latest gem from github, by putting this into my Gemfile:
gem 'bootstrap_form', github: 'bootstrap-ruby/rails-bootstrap-forms'
I use bootstrap-sass, so I didn't want to mess around with application.css, so I made sure the following import statements were in application.css.scss, like this:
#import "bootstrap";
#import 'rails_bootstrap_forms';
It's also quite important to remember to restart the server after making these changes!
You have got to create the file rails_bootstrap_form.css in app/assets/stylesheets
.rails-bootstrap-forms-date-select,
.rails-bootstrap-forms-time-select,
.rails-bootstrap-forms-datetime-select {
select {
display: inline-block;
width: auto;
}
}
.rails-bootstrap-forms-error-summary {
margin-top: 10px;
}
I had this problem and found that I'd mistyped the Gemfile entry as bootstrap-form. I corrected it to bootstrap_form and all was well.
Have you installed Bootstrap? Looks like that is a requirement of bootstrap_form, but it's not included as a dependency in the gem which means you need to manually install Bootstrap.
One popular way to do this is with the twitter-bootstrap-rails gem. The simplest way to install this is to include gem "twitter-bootstrap-rails" in your gemfile, and then run
$ bundle install
followed by
rails generate bootstrap:install static which should add the required CSS files to your assets folder.
I was getting the same error so I took out *= require rails_bootstrap_forms from application.css.scss and was able to compile and deploy without any errors.
Despite SO's admonishment not to respond to other answers I'm going to enhance Thomas Geider's answer above by explaining why you need to create a rails_bootstrap_forms.css file in app/assets/stylesheets.
If you look in the rails-bootstrap-forms Github you'll notice they have a rails_bootstrap_forms.css file. The README doesn't tell you this but it follows that this css file needs to be in /app/assets/stylesheets.
Here's the file:
https://github.com/bootstrap-ruby/rails-bootstrap-forms/blob/master/app/assets/stylesheets/rails_bootstrap_forms.css
Working on a project that started out with Bootstrap 2.3, using the bootstrap-sass gem, specifying version 2.3.1.0 in my gemfile. I'm wanting to update it to Bootstrap 3.
Here's what the app looks like with bootstrap-sass gem version 2.3.1.0:
I checked out a branch to experiment updating the styles to Bootstrap 3, so I updated my gemfile to use the latest version of the bootstrap-sass gem, ran bundle update and install.
I have bootstrap 3 version classes on each of the "Amazing Point" div elements you saw above, so the styles in the hero unit should vanish, the buttons should go flat, and the amazing points should span 4 columns with the "col-lg-4" class I've specified.
But when I launch the rails server, I get a mix of Bootstrap 2.3 and 3:
The "col-lg-4" classes applied to the Amazing Points, BUT the sign in and sign up buttons still look like Bootstrap 2.3 buttons! And there's a subtle, but visible change in the "Sign In" and "Sign Up" text - it's a tad bolder. It's like I've got some weird hybrid of Bootstrap 2.3 and 3 going on.
But now I run rake assets:precompile, and here's what I get:
Now things are displaying correctly.
But why do I always have to run rake assets:precompile to get it working correctly? And how could I make it where it would just update automatically when I switch between the gem files?
Here are the other relevant files:
application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require bootstrap
*= require_tree .
*/
Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'jquery-rails'
gem 'devise'
group :production do
gem 'pg'
end
group :development do
gem 'sqlite3'
end
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'bootstrap-sass', '3.0.2.0'
end
Gemfile.lock (I'll just show the bootstrap-sass version):
bootstrap-sass (3.0.2.0)
sass (~> 3.2)
application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
if defined?(Bundler)
# If you precompile assets before deploying to production, use this line
Bundler.require(*Rails.groups(:assets => %w(development test)))
# If you want your assets lazily compiled in production, use this line
# Bundler.require(:default, :assets, Rails.env)
end
module Bloccit
class Application < Rails::Application
config.encoding = "utf-8"
# Configure sensitive parameters which will be filtered from the log file.
config.filter_parameters += [:password]
# Enable escaping HTML in JSON.
config.active_support.escape_html_entities_in_json = true
config.active_record.whitelist_attributes = true
# Enable the asset pipeline
config.assets.enabled = true
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
config.assets.initialize_on_precompile = false
end
end
relevant lines in config/development.rb:
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
config.assets.compile = true
config.serve_static_assets = false
Ok, so I believe I've figured some of this out, after checking out this blog post.
For some reason, if you're updating from the Bootstrap 2.3 bootstrap-sass gem version to the latest one, YOU MUST clean out your old bootstrap-sass gem.
So I ran gem list bootstrap-sass which gave me:
*** LOCAL GEMS ***
bootstrap-sass (3.0.2.0)
bootstrap-sass (2.3.1.0)
Run gem cleanup bootstrap-sass -d and you'll be given a preview of what will happen. Then run gem cleanup bootstrap-sass -v and it will uninstall all previous versions. Restart your rails server and it works.
Then if you were wanting to go back to the old bootstrap-sass version, you would need to update your gemfile, run bundle, and then run gem uninstall bootsrap-sass 3.0.2.0 or whichever later bootstrap-sass gem that you have.
This is kind of a pain, so if someone knows a better way of going about this, please share. I might see if the bootstrap-sass-rails gem offers a better experience.
I create a new rails project,and add
gem 'bootstrap-sass'
to my Gemfile, then I run bundle install and every things going good. then I add:
/*
*= require bootstrap
*/
in my application.css file, and I write a test,but it doesn't.
and I also try add`#import "bootstrap"; in my hello.css.scss file .but it also doesn't work.
Rollen,
You seem to be mostly there. Sass is in Rails 3.1 by default so you won't need to do anything specific for that. After you add the gem to your Gemfile and do a bundle install your issue is in the application.css file. Typically when using Sass I'd just suggest that you remove the manifest code (all the commenting at the top) from the application.css and rename the application.css to application.css.scss (removing Sprockets from the CSS file). Then add:
#import 'bootstrap'
to the very top of it. That should solve it for you. You'll need to manually add each CSS file you'll want to load into the application.css.scss file since sprockets is gone, but that's typically a good idea anyway since load order in CSS is important for the cascade.
If you want to add the JavaScript features to the framework (which you likely will want to) you'll also want to add
//= require bootstrap
Just above the call to //= require_tree . within app/assets/javascripts/application.js.
Probably a little late to the party, but just in case anyone else stumbles across the question...
This was a small gotcha I Solved by adding #import "bootstrap"; to the top of my application.css file, the renamed the file to application.css.scss
Hope this helps.
https://github.com/rails/sass-rails needs to be there in your Gemfile.
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.1'
Remove all the comments at the top of the application.css and rename application.css to either application.sass or application.css.scss depending on how you want to do your css'ing
Then add:
#import 'bootstrap'
This should allow you to start using bootstrap, providing you have indeed included the bootstrap-sass gem correctly and ran bundle install afterwards.