twitter-bootstrap Rails 4 + 引导程序设置资产

Question

提问by codeObserver

I am trying to setup bootstrapon Rails4using bootstrap-sassand I am getting this famous error:

我正在尝试使用Rails4设置引导程序，但bootstrap-sass遇到了这个著名的错误：

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

I have tried following:

我试过以下：

twitter/bootstrapin application.js
gem 'bootstrap-sass', '~> 3.1.0'is outside group assets
Also tried bunch of other things on internet

twitter/bootstrap在 application.js
gem 'bootstrap-sass', '~> 3.1.0'是外部集团资产
还尝试了互联网上的其他一些东西

I have spend lot of time taking different suggestions from other posts. How do I systematically debug this , how to setup bootstrap-sass ?

我花了很多时间从其他帖子中获取不同的建议。我如何系统地调试这个，如何设置 bootstrap-sass ？

p.s:Also been trying to get twitter-bootstrap-railsworking with no luck.

ps：也一直试图在twitter-bootstrap-rails没有运气的情况下工作。

Here are some files

这里有一些文件

application.js

应用程序.js

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

application.css.scss

应用程序.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'

Answer 1

回答by Mini John

Installing the Bootstrap Gem

安装 Bootstrap Gem

1.)Add the Bootstrap Gem:

1.)添加 Bootstrap Gem：

gem 'bootstrap-sass'

2.)Understand The Application.css File app/assets/stylesheets/application.css

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

Application.css takes all the other files in your /stylesheetsdirectory and combines them for when you run your app.

Application.css 获取您/stylesheets目录中的所有其他文件，并在您运行应用程序时将它们组合起来。

3.)Create a New SCSS File (app/assets/stylesheets/bootstrap_and_customization.css.scss)

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

@import 'bootstrap';

4.)Require Bootstrap's JavaScript

4.)需要 Bootstrap 的 JavaScript

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

5.)Rails Assets

5.)Rails 资产

group :production do
  gem 'rails_12factor'
end

6.)Bundle Install & Restart Server

6.)捆绑安装和重启服务器

Thats should be it !

应该是这样！

Answer 2

回答by evgeny.myasishchev

On one of my projects (Rails 4.1) I had to include the bootstrap directly (not sass). Maybe it will give a hint on making the saas version work. So below are steps to include the bootstrap directly:

在我的一个项目（Rails 4.1）中，我必须直接包含引导程序（而不是 sass）。也许它会提示如何使 saas 版本工作。因此，以下是直接包含引导程序的步骤：

Download and and extract the bootstrap to Rails.root/vendor/assets/bootstrap
Create file Rails.root/vendor/assets/javascripts/bootstrap.jsfile with contents like this:
//= require ../bootstrap/js/bootstrap.js
Now the most important part to make icons work. The font file urls have to be overridden for the Glyphicons Halflings font. Also asset_pathhelper has to be used. So create file Rails.root/vendor/assets/stylesheets/bootstrap.css.erbfile with contents like this.

下载并解压引导程序到 Rails.root/vendor/assets/bootstrap
创建文件Rails.root/vendor/assets/javascripts/bootstrap.js文件，内容如下：
//= require ../bootstrap/js/bootstrap.js
现在是使图标工作的最重要的部分。必须为 Glyphicons Halflings 字体覆盖字体文件 url。还必须使用asset_path助手。所以创建文件Rails.root/vendor/assets/stylesheets/bootstrap.css.erb文件，内容如下。

/*
=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');
}

Now require bootstrap in the application.js and application.css

现在在 application.js 和 application.css 中需要 bootstrap

application.js

应用程序.js

//= require bootstrap

application.css

应用程序.css

 *= require bootstrap

And finally let assets pipeline be aware of the fonts path and additional extensions to precompile. In the application.rb add:

最后让资产管道知道字体路径和额外的预编译扩展。在 application.rb 添加：

config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts")
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 )

After that RAILS_ENV=production rake assets:precompileshould show that is has recognized font files and copied them to the public assets folder.

之后RAILS_ENV=production rake assets:precompile应该显示已识别的字体文件并将它们复制到公共资产文件夹。

Then to test if it works in production enable serving static assets (in production.rb: config.serve_static_assets = true) and RAILS_ENV=production rails s

然后测试它是否在生产中工作，启用服务静态资产（在 production.rb 中：config.serve_static_assets = true）和RAILS_ENV=production rails s

Answer 3

回答by codeObserver

I ended up using bootstrap from a hosted CDN

我最终使用了来自托管 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"}/

Answer 4

回答by user3294300

I had exactly the same error. The solution was to change in:

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

config/environments/production.rb

The line

线

config.serve_static_assets = false

to

到

config.serve_static_assets = true

I'm not exactly aware of what this line does, but my workteam had the same problem on a project, and they changed this line, and it worked.

我不完全清楚这条线的作用，但我的工作团队在一个项目上遇到了同样的问题，他们改变了这条线，它奏效了。

Answer 5

回答by CS Koh

Try this:

试试这个：

Open config/application.rb, add the following line:

打开 config/application.rb，添加以下行：

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

In your config.ru file, add

在您的 config.ru 文件中，添加

 require 'bootstrap-sass'

Rename your application.css.scss to something else e.g. custom_bootstrap.css.scss. I have no idea why it makes a difference but it did in my case.

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

Also, from what I understand, by default bootstrap-sass does not require you to add

另外，据我了解，默认情况下 bootstrap-sass 不需要您添加

  //require bootstrap

to your application.js. Apparently it breaks some kind of functionality.

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

Answer 6

回答by tzurcan

i had the same issue :couldn't find file 'bootstrap-sprockets' with type 'application/javascript' The only solution was to comment off in the Gemfile gem 'sass-rails', '~> 5.0' and add instead gem 'sass-rails', '>= 3.2'

我遇到了同样的问题：找不到类型为“application/javascript”的文件“bootstrap-sprockets”唯一的解决方案是在 Gemfile gem 'sass-rails'、'~> 5.0' 中注释掉，然后添加 gem ' sass-rails', '>= 3.2'

hope this helps other members

希望这能帮助其他成员

Answer 7

回答by Mirv - Matt

The fix for me was two parts ... my correct list first ... but the list alone wasn't the fix!

对我来说，修复分为两部分……首先是我的正确列表……但仅凭列表并不是修复！

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

Then I had a gemfile.Lock issue ... if anyone else can't get the files to load & doesn't want to use the CDN...check your gemfile.Lock & see what versions are compiled off the gemfile (one is input for us as dev's & the other is what is actually ran by the framework - it will cause issues if you try to modify gemfile.lock).

然后我遇到了 gemfile.Lock 问题...如果其他人无法加载文件并且不想使用 CDN...检查您的 gemfile.Lock 并查看从 gemfile 编译的版本（一个是我们作为开发人员的输入，另一个是框架实际运行的内容 - 如果您尝试修改 gemfile.lock 会导致问题）。

To resolve the gemfile lock...close the gemfile & gemfile.Lock

要解决 gemfile 锁...关闭 gemfile 和 gemfile.Lock

I had to first delete the items in question from the "gemfile".
I did a "gem install <name of gemfile>" I wanted for each of them.

我必须首先从“gemfile”中删除有问题的项目。
我gem install <name of gemfile>为他们每个人做了一个“ ”。

Then open the gemfile & gemfile.Lock to check results. Note, you still have to do all the configuration bootstrap etc requires for each of these. It doesn't hurt to run a rails assets:precompileeither.

然后打开 gemfile & gemfile.Lock 查看结果。请注意，您仍然必须为这些中的每一个执行所有配置引导程序等。运行一个rails assets:precompile也没有什么坏处。

Note: The rails assets:precompile is a rails 5 command.

注意：rails assets:precompile 是一个 rails 5 命令。

Answer 8

回答by Dhanshree

add to Gemfile

添加到 Gemfile

gem 'font-awesome-rails'

do bundle install

做捆绑安装

add to application.css

添加到 application.css

*= require font-awesome

*= 需要字体很棒

and, restart rails server.

并且，重新启动 rails 服务器。

twitter-bootstrap Rails 4 + 引导程序设置资产

提问by codeObserver

回答by Mini John

回答by evgeny.myasishchev

回答by codeObserver

回答by user3294300

回答by CS Koh

回答by tzurcan

回答by Mirv - Matt

回答by Dhanshree

相关推荐

最近更新

标签

twitter-bootstrap Rails 4 + 引导程序设置资产

提问by codeObserver

回答by Mini John

回答by evgeny.myasishchev

回答by codeObserver

回答by user3294300

回答by CS Koh

回答by tzurcan

回答by Mirv - Matt

回答by Dhanshree

相关推荐

twitter-bootstrap Bootstrap 表单组未正确对齐

twitter-bootstrap Bootstrap 按钮链接不起作用

twitter-bootstrap 如何我的切换按钮更改颜色只有我的折叠在我的引导程序 3 导航栏中打开

twitter-bootstrap 带 ajax 的引导加载折叠面板

相关推荐

最近更新

标签