Rails Asset Pipeline và Twitter Bootstrap Gem

Question

Tôi đang sử dụng nhánh chính mới nhất của gem gem bootstrap và cố gắng sửa đổi các biến khởi động mặc định theo cách tương thích với đường dẫn nội dung đường ray.

tập đá quý của tôi có những đá quý bao gồm

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

Tôi cũng bao gồm *= require bootstrap_and_overrides trong tập tin application.css tôi. Tôi biết rằng sprockets biên dịch từng tệp css riêng lẻ và do đó bạn không thể mong đợi nhiều tệp css để có thể tham chiếu lẫn nhau. Do đó, tệp bootstrap_and_overrides.css.less bao gồm:

@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's 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; 

Tuy nhiên, không có phần ghi đè nào của tôi hoạt động trong đường ống nội dung. Họ làm việc tốt mà không có nó. Có ai biết tại sao không?

Cập nhật nội dung của tôi Gem Nhóm

# 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 

Answer 1

Chạy rake assets:precompile tại địa phương trước khi triển khai giải quyết vấn đề của tôi ở trên.

Answer 2

Trong trường hợp của tôi, thư mục mà công cụ đường ống tài sản tìm kiếm các nguồn lực đã không thiết lập một cách chính xác, gây ra tài sản không được biên dịch đúng cách.

Tôi đang sử dụng bootstrap-sass, vì vậy, tình huống của bạn có thể khác. Nhưng trong trường hợp của tôi, thêm mã sau vào application.rb giải quyết vấn đề của tôi.

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 

Cố gắng chạy rails console và kiểm tra giá trị của load_paths hoặc một cái gì đó như thế trước khi áp dụng ở trên (xấu xí) bản vá lỗi ..

Answer 3

Tôi đang sử dụng ít bootstrap với đường ray 4.1 và ruby ​​2,0 nhưng tôi cố định này bằng cách thêm này để application.css.scss

*= require_tree . 
*= require bootstrap_and_overrides 
*= require_self