Rails 4 + bootstrap设置资产

时间:2014-02-03 02:58:41

标签: ruby-on-rails twitter-bootstrap ruby-on-rails-4 asset-pipeline bootstrap-sass

我正在尝试使用bootstrap-sass Rails4 上设置 bootstrap ,我收到了这个着名的错误:

Sprockets::FileNotFound - couldn't find file 'bootstrap'
  (in app/assets/javascripts/application.js:16):

我试过以下:

    twitter/bootstrap
  1. application.js
  2. gem 'bootstrap-sass', '~> 3.1.0'在群组资产之外
  3. 还在网上试了很多其他的东西
  4. 我花了很多时间从其他帖子中提出不同的建议。我如何系统地调试这个,如何设置bootstrap-sass?

    P.S: 也试图让twitter-bootstrap-rails没有运气。

    以下是一些文件

    的application.js

    //= require jquery
    //= require jquery_ujs
    //= require js-routes
    //= require bootstrap
    //= require_tree .
    //= require bootstrap-slider
    

    application.css.scss

     *= require jquery.ui.core
     *= require jquery.ui.theme
     *= require_self
     *= require bootstrap-slider
     *= require_tree .
     *= stub active_admin
    */
    
    @import "bootstrap";
    

    的Gemfile

    source 'https://rubygems.org'
    ruby '2.0.0'
    gem 'rails', '4.0.0'
    gem 'sass-rails'
    gem 'coffee-rails', git: 'git://github.com/rails/coffee-rails.git'
    gem 'uglifier', '>= 1.0.3'
    gem 'jquery-ui-rails'
    gem 'font-awesome-sass'
    gem 'less-rails'
    gem 'therubyracer', :platform=>:ruby
    #gem 'twitter-bootstrap-rails'
    gem 'jquery-rails'
    #gem 'jquery_mobile_rails'
    gem 'js-routes'
    gem 'cancan'
    gem 'devise'
    gem 'figaro'
    gem 'haml-rails'
    gem 'pg'
    gem 'rolify'
    gem 'sendgrid'
    gem 'simple_form'
    gem 'thin'
    gem 'rake'
    
    #To use db for storing cookies instead cookie-store
    gem 'activerecord-session_store', github: 'rails/activerecord-session_store'
    
    group :development do
      gem 'better_errors'
      #gem 'binding_of_caller', :platforms=>[:mri_19, :rbx]
      #Commenting out platforms part, because may be that's stopping this to be used on the dev machine'
      gem 'binding_of_caller'
      gem 'guard-bundler'
      gem 'guard-rails'
      gem 'guard-rspec'
      gem 'html2haml'
      gem 'quiet_assets'
      gem 'rb-fchange', :require=>false
      gem 'rb-fsevent', :require=>false
      gem 'rb-inotify', :require=>false
    
      # Required with Rails panel chrome extension. This Gem should come after better_errors gem
      gem 'meta_request'
    end
    group :development, :test do
      gem 'factory_girl_rails'
      gem 'rspec-rails'
      gem 'pry-byebug'
      gem 'pry-stack_explorer'
      gem 'pry-rails'
      gem 'pry-debugger'
    end
    
    group :test do
      gem 'capybara'
      gem 'database_cleaner'
      gem 'email_spec'
    end
    
    group :production do
      gem 'rails_12factor'
    end
    
    gem 'high_voltage'
    
    #Linkedin Logins
    gem "linkedin"
    gem "omniauth"
    gem "omniauth-linkedin"
    
    gem "omniauth-facebook"
    
    #postgres use hstore in active record
    #gem 'activerecord-postgres-hstore'
    
    gem 'state_machine'
    gem "ruby-graphviz"
    
    
    #payments
    #gem 'stripe',:git => 'https://github.com/stripe/stripe-ruby'
    
    #gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails'
    
    gem 'newrelic_rpm'
    
    gem 'pgbackups-archive'
    
    gem 'pg_search'
    
    gem 'acts-as-taggable-on'
    
    #gem 'activeadmin' , github: 'gregbell/active_admin'
    gem "activeadmin", git: "https://github.com/gregbell/active_admin"
    
    gem 'kaminari'
    gem 'bootstrap-slider-rails'
    gem 'bootstrap-sass', '~> 3.1.0'
    

8 个答案:

答案 0 :(得分:14)

安装Bootstrap Gem

1。)添加Bootstrap Gem:

gem 'bootstrap-sass'

2。)了解Application.css文件 app/assets/stylesheets/application.css

Application.css会获取/stylesheets目录中的所有其他文件,并在您运行应用时将其合并。

3。)创建新的SCSS文件(app / assets / stylesheets / bootstrap_and_customization.css.scss)

@import 'bootstrap';

4。)需要Bootstrap的JavaScript

...
//= require jquery
//= require jquery_ujs
//= require bootstrap <--
//= require turbolinks
//= require_tree .

5。) Rails资产

group :production do
  gem 'rails_12factor'
end

6。)捆绑安装&amp;重启服务器

多数民众赞成就是这样!

答案 1 :(得分:3)

在我的一个项目中( Rails 4.1 )我必须直接包含引导程序(不是sass )。也许它会给出一个关于使saas版本工作的暗示。以下是直接包含引导程序的步骤:

  1. 下载并解压缩引导至 的 Rails.root /供应商/资产/自举
  2. 使用以下内容创建文件 Rails.root / vendor / assets / javascripts / bootstrap.js 文件:

    //= require ../bootstrap/js/bootstrap.js

  3. 现在是让图标工作最重要的部分。必须为Glyphicons Halflings字体覆盖字体文件网址。此外,还必须使用 asset_path 帮助程序。因此,使用这样的内容创建文件 Rails.root / vendor / assets / stylesheets / bootstrap.css.erb 文件。

  4. /*
    =require ../bootstrap/css/bootstrap.css
    */
    
    @font-face {
        font-family: 'Glyphicons Halflings';
    
        src: url("<%= asset_path 'glyphicons-halflings-regular.eot' %>");
        src: url("<%= asset_path 'glyphicons-halflings-regular.eot?#iefix' %>") format('embedded-opentype'), url("<%= asset_path 'glyphicons-halflings-regular.woff2' %>") format('woff2'), url("<%= asset_url 'glyphicons-halflings-regular.woff' %>") format('woff'), url("<%= asset_path 'glyphicons-halflings-regular.ttf' %>") format('truetype'), url("<%= asset_path 'glyphicons-halflings-regular.svg#glyphicons_halflingsregular' %>") format('svg');
    }
    
    1. 现在需要在application.js和application.css
    2. 中使用bootstrap

      的application.js

      //= require bootstrap
      

      application.css

       *= require bootstrap
      
      1. 最后让资产管道知道字体路径和预编译的附加扩展。在application.rb中添加:
      2. config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts")
        config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 )
        

        之后 RAILS_ENV =生产佣金资产:预编译应显示已识别的字体文件并将其复制到公共资源文件夹。

        然后测试它是否在生产中工作,启用服务静态资产(在production.rb中:config.serve_static_assets = true)和 RAILS_ENV =生产轨道

答案 2 :(得分:1)

我最终使用托管CDN的引导程序

      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css", rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" , rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", rel: "stylesheet"}/

答案 3 :(得分:1)

我有完全相同的错误。解决方案是改变:

config/environments/production.rb

该行

config.serve_static_assets = false

config.serve_static_assets = true

我并不完全知道这条线的作用,但是我的工作团队在项目上遇到了同样的问题,他们改变了这一行,并且有效。

答案 4 :(得分:1)

试试这个:

打开config / application.rb,添加以下行:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

在config.ru文件中,添加

 require 'bootstrap-sass'

将application.css.scss重命名为其他内容,例如custom_bootstrap.css.scss。我不知道它为什么会有所不同,但它确实在我的情况下。

另外,根据我的理解,默认情况下bootstrap-sass不需要你添加

  //require bootstrap

到你的application.js。显然它破坏了某种功能。

答案 5 :(得分:0)

我遇到了同样的问题:无法找到类型为'application / javascript'的文件'bootstrap-sprockets' 唯一的解决方案是在Gemfile中注释掉 宝石'sass-rails','〜&gt; 5.0'并添加 gem'sass-rails','&gt; = 3.2'

希望这有助于其他成员

答案 6 :(得分:0)

对我的修复是两个部分......我的正确列表是第一个...但单独列表并不是解决方法!

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'

然后我有一个gemfile.Lock问题...如果其他人无法获取要加载的文件&amp;不想使用CDN ...检查你的gemfile.Lock&amp;看看哪些版本是从gemfile中编译出来的(一个是我们输入的dev&#39; s&amp;另一个是框架实际运行的内容 - 如果你试图修改gemfile.lock会导致问题。)

解决gemfile锁...关闭gemfile&amp; Gemfile.lock的

  1. 我必须先从&#34; gemfile&#34;中删除有问题的项目。
  2. 我做了一个&#34; gem install <name of gemfile>&#34;我想要他们每个人。
  3. 然后打开gemfile&amp; gemfile.Lock来检查结果。注意,您仍然必须为每个配置引导程序等所需的配置。运行rails assets:precompile也没有什么坏处。

    注意:rails资产:预编译是一个rails 5命令。

答案 7 :(得分:0)

添加到Gemfile

  

gem&#39; font-awesome-rails&#39;

进行捆绑安装

添加到application.css

  

* =要求font-awesome

并重启rails服务器。