Geek asks and answers

Rails Asset Pipeline and Twitter Bootstrap Gem

I use the last leading branch of bootstrap rails and try to modify bootstrap variables that are compatible with the rails resource pipeline.

There are these gems in my gem file

gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'uglifier', '>= 1.0.3'
gem 'less-rails-bootstrap'

I also included *= require bootstrap_and_overridesin my application.cssfile. I know that sprockets compiles each css file individually, and therefore you cannot expect multiple css files to be able to link to each other. Therefore, the bootstrap_and_overrides.css.less file contains the following:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 80px; }

//background-image: asset-url("background.png"); background-repeat:no-repeat; background-size: cover;  }

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-path('fontawesome-webfont.eot');
@fontAwesomeWoffPath: asset-path('fontawesome-webfont.woff');
@fontAwesomeTtfPath: asset-path('fontawesome-webfont.ttf');
@fontAwesomeSvgzPath: asset-path('fontawesome-webfont.svgz');
@fontAwesomeSvgPath: asset-path('fontawesome-webfont.svg');

// Font Awesome
@import "fontawesome";

// 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 own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;

@navbarHeight: 60px;
@navbarText: @white;
@textColor: @orange;
@navbarLinkColor: @white;
@navbarBackground: darken(@linkColor, 15%);
@navbarBackgroundHighlight: @linkColor;

However, none of my overrides work within the asset pipeline. Without it, they do an excellent job. Does anyone know why?

Update My Gem Group Assets

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'less-rails'
  #  gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  gem 'therubyracer', :platform => :ruby
  gem 'uglifier', '>= 1.0.3'
end
+5
source
3

rake assets:precompile .

+6

, , , .

bootstrap-sass, . application.rb .

module ApplicationModuleName
  class Application < Rails::Application

    config.sass.load_paths = []
    config.sass.load_paths << "#{Rails.root}/app/assets/stylesheets"
    %w(bootstrap-sass jstree-rails jquery-rails).each do |pkg|
      config.sass.load_paths << "#{Gem.loaded_specs[pkg].full_gem_path}/vendor/assets/stylesheets"
      config.assets.paths << "#{Gem.loaded_specs[pkg].full_gem_path}/vendor/assets/javascripts"
    end
  end
end

rails console load_paths - () .

+3

bootstrap rails 4.1 ruby ​​2.0, , application.css.scss

*= require_tree .
*= require bootstrap_and_overrides
*= require_self
0

More articles:


All Articles