web-dev-qa-db-fra.com

Actifs de configuration Rails 4 + bootstrap

J'essaye d'installer bootstrap on Rails4 en utilisant bootstrap-sass et j'obtiens cette fameuse erreur:

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

J'ai essayé de suivre:

  1. Twitter/bootstrap dans application.js
  2. gem 'bootstrap-sass', '~> 3.1.0' est en dehors des actifs du groupe
  3. Aussi essayé un tas d'autres choses sur internet

J'ai passé beaucoup de temps à prendre différentes suggestions d'autres publications. Comment puis-je systématiquement déboguer ceci, comment configurer bootstrap-sass?

p.s: Également essayé de faire fonctionner Twitter-bootstrap-Rails sans succès.

Voici quelques fichiers

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'
ruby-on-railstwitter-bootstrapruby-on-rails-4asset-pipelinebootstrap-sass
15
codeObserver

Installation de la gomme Bootstrap

1.) Ajouter le joyau Bootstrap:

gem 'bootstrap-sass'

2.) Comprendre le fichier Application.css app/assets/stylesheets/application.css

Application.css prend tous les autres fichiers de votre répertoire /stylesheets et les combine pour vous permettre d'exécuter votre application.

3.) Créer un nouveau fichier SCSS (app/assets/stylesheets/bootstrap_and_customization.css.scss)

@import 'bootstrap';

4.) Requiert le code JavaScript de Bootstrap

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

5.) Rails Assets

group :production do
  gem 'Rails_12factor'
end

6.) Bundle Install & Restart Server

Ça devrait être ça!

14
Mini John

Sur l'un de mes projets ( Rails 4.1 ), je devais inclure le bootstrap directement ( not sass ). Cela donnera peut-être un indice pour que la version saas fonctionne. Voici donc les étapes à suivre pour inclure directement le bootstrap:

  1. Téléchargez et extrayez le bootstrap dans Rails.root/vendor/assets/bootstrap

  2. Créer un fichier Rails.root/vendor/assets/javascripts/bootstrap.js fichier avec un contenu comme celui-ci:

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

  3. Maintenant, la partie la plus importante pour faire fonctionner les icônes. Les URL du fichier de police doivent être remplacées par la police Glyphicons Halflings. De plus, asset_path helper doit être utilisé. Créez donc le fichier Rails.root/vendor/assets/stylesheets/bootstrap.css.erb le fichier avec un contenu comme celui-ci.

/*
=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. Maintenant besoin de bootstrap dans le fichier application.js et application.css

application.js

//= require bootstrap

application.css

 *= require bootstrap
  1. Et enfin, laissez le pipeline d'actifs connaître le chemin des polices et les extensions supplémentaires à précompiler. Dans l'application.rb, ajoutez:
config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts")
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 )

Après cela Rails_ENV = Production rake assets: précompiler devrait montrer qu’il a reconnu les fichiers de polices et les avoir copiés dans le dossier des actifs publics.

Ensuite, pour vérifier si cela fonctionne en production, activez les actifs statiques (dans production.rb: config.serve_static_assets = true) et Rails_ENV = Rails de production s

3
evgeny.myasishchev

Essaye ça:

Ouvrez config/application.rb, ajoutez la ligne suivante:

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

Dans votre fichier config.ru, ajoutez 

 require 'bootstrap-sass'

Renommez votre application.css.scss en quelque chose d'autre, par exemple. custom_bootstrap.css.scss. Je ne sais pas pourquoi cela fait une différence, mais c'est ce qui s'est passé dans mon cas.

De plus, si je comprends bien, par défaut, bootstrap-sass ne nécessite pas que vous ajoutiez

  //require bootstrap

à votre application.js. Apparemment, il casse une sorte de fonctionnalité.

1
CS Koh

J'ai eu exactement la même erreur. La solution était de changer dans:

config/environments/production.rb

La ligne 

config.serve_static_assets = false

à

config.serve_static_assets = true

Je ne sais pas exactement ce que cette ligne fait, mais mon équipe de travail a eu le même problème sur un projet, et ils ont changé cette ligne, et cela a fonctionné.

1
user3294300

J'ai fini par utiliser bootstrap à partir d'un CDN hébergé 

      %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"}/
1
codeObserver

ajouter à Gemfile

gem 'font-awesome-rails'

faire une offre groupée

ajouter à application.css

* = besoin de font-awesome

et redémarrez le serveur Rails.

0
Dhanshree

La solution pour moi était en deux parties ... ma liste correcte en premier ... mais la liste seule n'était pas la solution! 

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

Ensuite, j'ai eu un problème avec gemfile.Lock ... si quelqu'un d'autre n'arrive pas à charger les fichiers et ne veut pas utiliser le CDN ... vérifiez votre gemfile.Lock et voyez quelles versions sont compilées à partir du gemfile (un Ceci est une entrée pour nous en tant que dev & l'autre est ce qui est réellement exécuté par le framework - cela posera des problèmes si vous essayez de modifier gemfile.lock).

Pour résoudre le verrouillage du fichier gem ... fermez le fichier gemfile & gemfile.Lock

  1. Je devais d'abord supprimer les éléments en question du "gemfile". 
  2. J'ai fait un "gem install <name of gemfile>" que je voulais pour chacun d'eux.

Ensuite, ouvrez le fichier gemfile & gemfile.Lock pour vérifier les résultats. Notez que vous devez encore faire toute la configuration requise par bootstrap, etc. pour chacune d’elles. Exécuter un Rails assets:precompile ne fait pas mal non plus.

Remarque: Les ressources Rails: la précompilation est une commande Rails 5.

0
Mirv - Matt

j'avais le même problème: impossible de trouver le fichier 'bootstrap-sprockets' avec le type 'application/javascript' La seule solution consistait à commenter dans Gemfile gem 'sass-Rails', '~> 5.0' et ajoutez à la place Gem 'sass-Rails', '> 3.2' 

espérons que cela aide les autres membres

0
tzurcan