Reputation: 23
I would like to use less with twitter-bootstrap-rails gem, but i receiving "Failed to load /assets/bootstrap.css" and "Failed to load /assets/bootstrap-responsive.css" errors (safari web inspector). Any ideas?
Here is my Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.8'
gem 'devise'
gem 'cancan'
gem 'rolify'
gem 'roo'
gem 'kaminari'
gem 'activeadmin'
gem 'less-rails'
group :assets do
gem 'coffee-rails'
gem 'therubyracer', :platforms => :ruby
gem 'jquery-ui-rails'
gem 'angularjs-rails'
gem 'angular-ui-rails'
gem 'uglifier'
gem 'slim'
gem 'sass-rails'
gem 'twitter-bootstrap-rails'
gem 'bootstrap-timepicker-rails'
end
gem 'jquery-rails'
gem 'rabl'
gem 'yajl-ruby'
group :production do
gem 'sqlite3'
end
group :development, :test do
gem 'sqlite3'
gem "capistrano"
gem "rvm-capistrano"
gem 'ruby-prof'
end
Here is my bootstrap_and_overrides.css.less file:
@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
@import "fontawesome";
// Glyphicons
@import "twitter/bootstrap/sprites.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;
.icon-pressed {
.icon-white;
.label;
width: auto
}
table > thead th {
white-space: nowrap;
vertical-align: 50% !important;
font-weight: normal !important;
cursor: pointer;
}
Here is my 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_and_overrides
*= require jquery.ui.all
*= require daterangepicker
*= require bootstrap-timepicker
*= require angular-ui
*= require_tree .
*/
body { padding-top: 50px; }
footer { margin-top: 200px; }
Here is my view:
<!DOCTYPE html>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
Upvotes: 0
Views: 2430
Reputation: 23
I've finally found it! I forget to delete these lines
<%= stylesheet_link_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap-responsive" %>
from my application.html.erb
Upvotes: 0
Reputation: 435
You have to run the command
rake assets:precompile
so the CSS files get copied into public folder. Try that, otherwise it may be that you are not adding the CSS to your HTML.
Upvotes: 1
Reputation: 4315
I would advice you just to add a new insertion to your application.css
manifest file . You should add :
*= require bootstrap
*= require bootstrap-responsive
right after *=require self
statement . I think it is a part of installing the gem twitter-bootstrap-rails
, which means that you have missed rails g bootstrap:install
.
The error messages are generated from wrong inclusion on the top of your bootstrap_and_overrides.css.less file
(@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
). You should remove them .
You may consider to get more information from this RialsCast.
Upvotes: 0