web-dev-qa-db-fra.com

Impossible de faire fonctionner CSS sur Heroku en utilisant Rails 4 avec gem bootstrap-sass

J'ai déployé une application sur Heroku avec un problème que je n'arrive pas à comprendre. Le CSS de l'application via Bootstrap-sass ne se charge pas, j'ai donc une application sans style. Pour le moment, ce n'est qu'une collection de pages statiques.

J'ai suivi toutes les étapes sauf une dans le README https://github.com/thomas-mcdonald/bootstrap-sass l'étape que je ne peux pas comprendre et Il est fort probable que mon problème soit le suivant: en raison d'une modification de Rails qui empêche la compilation des images dans vendor et lib, vous devrez ajouter la ligne suivante à votre application.rb :

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

Étant donné que je suis encore très nouveau dans la programmation, le premier problème est que je n'ai aucune idée où et comment l'ajouter dans le fichier application.rb. J'apprécierais grandement que quelqu'un puisse m'aider à montrer comment et où ajouter correctement la ligne de code ci-dessus.

Le deuxième problème pourrait être lié aux gemmes que j'utilise, mais lorsque j'ai créé l'application, la gemme sass-Rails a été installée avec ~> 4.0.0.beta1. Selon le README la version à utiliser est 3.2. Comme cela pourrait également être un problème, j'ai inclus le fichier gem au cas où quelqu'un déterminerait que c'est la raison sous-jacente de mon problème.

Merci d'avance pour toute aide que vous pouvez apporter.

Modifier: pour ajouter les étapes que j'ai prises lors du premier essai qui ont permis au style de fonctionner correctement sur mon hôte local, mais pas une fois que le code a été déployé sur heroku.

  1. Création d'une nouvelle application Rails 4 (fichier gem ci-dessous)
  2. Ajout de la gemme bootstrap-sass répertoriée dans le fichier gem ci-dessous
  3. Ajout de PG gem à mon fichier gem dans le groupe de production et déplacement de SQLite3 vers le développement et le test (exécution de l'installation du bundle - sans production en suivant les étapes 2 et 3)
  4. créé un contrôleur de pages pour une page d'accueil statique
  5. Ajout d'un h1 dans une unité de héros sur la page d'accueil juste pour voir si le style fonctionnait
  6. ajouté un fichier styles.css.scss et inclus @import 'bootstrap'; à la feuille de style
  7. Création du référentiel git, exécution de ma validation initiale et transmission du code à git
  8. Créé l'application Heroku et poussé le maître vers Heroku

Lors de la deuxième tentative, j'ai ajouté une barre de navigation à la page d'accueil (si cela fait une différence pour quiconque) et j'ai à nouveau suivi les étapes 7 et 8, mais juste avant de faire ces étapes, j'ai exécuté la ligne de code suivante.

Rails_ENV=production bundle exec rake assets:precompile

Je me suis quand même retrouvé avec un site qui avait le bon style sur mon hôte local mais aucun style ne fonctionnait sur Heroku. Comme je l'ai noté ci-dessus dans mon message d'origine, il y a une ligne de code qui doit être ajoutée au fichier application.rb que je n'ai pas suivie en raison de mon manque de compréhension sur la façon d'ajouter correctement la ligne de code dans le fichier.

Gemfile:

source 'https://rubygems.org'

Ruby "2.0.0"

# Bundle Edge Rails instead: gem 'Rails', github: 'Rails/rails'
gem 'Rails', '4.0.0.beta1'

group :production do
gem 'pg'
end

group :development, :test do
gem 'sqlite3'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-Rails',   '~> 4.0.0.beta1'
gem 'coffee-Rails', '~> 4.0.0.beta1'

gem 'bootstrap-sass', '~> 2.3.1.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :Ruby

gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-Rails'

# Turbolinks makes following links in your web application faster. Read more:  https://github.com/Rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/Rails/jbuilder
gem 'jbuilder', '~> 1.0.1'

# To use ActiveModel has_secure_password
# gem 'bcrypt-Ruby', '~> 3.0.0'

# Use Unicorn as the app server
# gem 'Unicorn'

# Deploy with Capistrano
# gem 'capistrano', group: :development

# To use debugger
# gem 'debugger'
ruby-on-railsherokuruby-on-rails-4bootstrap-sass
36
Kevin Dark

Je viens de recevoir (13 juin 2013) cette réponse des développeurs Heroku dont le soutien m'a guidé à travers les barrières. C'est ainsi que mon affichage CSS de localhost fonctionne dans mon application Heroku.

"Tout ce que vous avez à faire est d'activer la diffusion des ressources en production et de configurer l'enregistreur sur stdout pour que Rails4 fonctionne sur Heroku. Nous travaillons actuellement à lisser le processus de déploiement pour Rails 4 applications mais en attendant, vous pouvez simplement changer ces lignes dans votre code et vous n'aurez pas besoin de ces gemmes. "(Merci Bret et Neil d'excellentes nouvelles)

Dans/config/environnements/production. ensemble:

config.cache_classes = true
config.serve_static_files = true
config.assets.compile = true
config.assets.digest = true

Je ne connais pas la sortie standard dans l'enregistreur, je ne peux donc pas vérifier cela.

Faites un ajout git. et git commit.

Assurez-vous que /config/database.yml a:

production:
  adapter: postgresql
  encoding: unicode
  database: Your_appname_production

Vous aurez besoin de ces informations pour la commande env ci-dessous.

Assurez-vous que votre gemfile contient des gemmes 'pg'. Faites un autre git commit.

Exécutez cette commande dans un terminal de votre application sur une seule ligne:

env Rails_ENV=production DATABASE_URL=postgresql://user:[email protected]/Your_app_name_production bundle exec rake assets:precompile 2>&1

Où DATABASE_URL = postgresql est identique à votre adaptateur de production dans le fichier yml et Your_app_name_production est spécifié car Heroku semble uniquement exécuter la production.

On m'a déconseillé et je n'avais pas besoin:

group :production do
  gem 'Rails_log_stdout',           github: 'heroku/Rails_log_stdout'
  gem 'Rails3_serve_static_assets', github: 'heroku/Rails3_serve_static_assets'
end

Il génère des erreurs lors de l'installation du bundle et de Heroku.

Je ne sais pas si cela aide, mais j'ai également ajouté la production à

Bundler.require(*Rails.groups(assets: %w(development test production)))

Je ne me souviens pas où j'ai vu ce conseil.

HTH Arel

70
user2481435

Exécutez simplement bundle exec rake assets:precompile avant de pousser vers heroku

18
JasmineOT

J'ai pu résoudre ce problème en ajoutant ces deux joyaux à mon application

group :production do
  gem 'Rails_log_stdout',           github: 'heroku/Rails_log_stdout'
  gem 'Rails3_serve_static_assets', github: 'heroku/Rails3_serve_static_assets'
end

Ajoutez cela, exécutez bundle install puis appuyez sur Heroku.

Vos styles devraient commencer à se charger.

8
DavidVII

Tout d'abord, passez de Rails beta à la dernière version .

Vérifiez où vous pouvez définir config.assets.initialize_on_precompile = false car cela pourrait le faire revenir à la résolution des actifs non sprockets (je suppose que vous l'avez peut-être défini sur false lors de la lecture de Rails 3.x sur les documents heroku).

Rétablir la valeur par défaut true

Ruby config.assets.initialize_on_precompile = true

Activez ensuite user-env-compile pour l'application sur heroku:

# Enable precompile support for the app
heroku labs:enable user-env-compile
# Remove precompiled assets
rm -rf public/assets/
git add -u 
git commit -m 'Remove precompiled assets'
# Now Push and everything should just work from now on
git Push heroku master

Adapté de ce commentaire de problème bootstrap-sass .

4
glebm

Ensemble config.assets.compile=true dans le fichier /config/environments/production.rb:

config.assets.compile=true

Cliquez ici pour savoir en savoir plus sur le pipeline d'actifs.

4
snowblindzz

Une raison simple de ce problème héroïque pourrait être de mélanger les types de fichiers css. Dans ma propre expérience, cela se produit si vous extrayez un dossier d'actifs contenant à la fois des types de fichiers .css et .scss. Peut-être que quelqu'un d'autre peut expliquer pourquoi cela se produit ... mais, tout ce qu'il m'a fallu était de renommer les fichiers .css en .scss. Ensuite, tout s'est compilé correctement et tout allait bien dans le monde.

3
hellion
config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

les configurer dans config/envirnoments/production.rb a résolu un problème similaire pour moi avec le serveur Apache

2
Dmitry Matveev

Je ne définirais pas config.assets.compile = true cela a des implications en termes de performances (mais cela fonctionne).

Comme indiqué ici: https://stackoverflow.com/a/16882028/647427

When using the asset pipeline, paths to assets must be re-written and sass-Rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

image-url("Rails.png") becomes url(/assets/Rails.png)
image-path("Rails.png") becomes "/assets/Rails.png"
The more generic form can also be used but the asset path and class must both be specified:

asset-url("Rails.png", image) becomes url(/assets/Rails.png)
asset-path("Rails.png", image) becomes "/assets/Rails.png"
2
cman77