web-dev-qa-db-ja.com

Rails 4 with bootstrap-sass gemを使用してHerokuでCSSを動作させることはできません

Herokuにアプリをデプロイしましたが、1つの問題がわかりません。 Bootstrap-sassを介したアプリのCSSが読み込まれないため、スタイルのないアプリがあります。現時点では、これは単なる静的ページのコレクションです。

README https://github.com/thomas-mcdonald/bootstrap-sass の1つのステップを除いてすべてを実行しました。私の問題である可能性が高いのは、次のとおりです。Railsの変更により、ベンダーおよびlibでイメージがコンパイルされないため、application.rbに次の行を追加する必要があります。 ：

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

私はまだプログラミングを始めたばかりなので、最初の問題はapplication.rbファイル内のどこにどのようにこれを追加するのか見当もつかないことです。上記のコード行を適切に追加する方法と場所を教えてくれる人がいれば、とても感謝しています。

2番目の問題は、使用しているgemに関連している可能性がありますが、アプリを作成したときに、sass-Rails gemが〜> 4.0.0.beta1でインストールされました。 READMEによると、使用するバージョンは3.2です。これも問題になる可能性があるため、私の問題の根本的な理由であると判断した場合に備えてgemファイルを含めました。

あなたが提供できる助けを前もってありがとう。

編集：最初の試行で行った手順を追加して、ローカルホストでスタイルが正常に機能するようになりましたが、コードがherokuにデプロイされた後ではないことを追加しました。

  1. 新しいRails 4アプリを作成しました（下のgemファイル）
  2. 以下のgemファイルにリストされているbootstrap-sass gemを追加しました
  3. 実稼働グループのgemファイルにPG gemを追加し、SQLite3を開発およびテストに移動しました（バンドルインストールを実行しました-ステップ2および3に従って実稼働なし）
  4. 静的ホームページ用のPages Controllerを作成しました
  5. スタイルが機能しているかどうかを確認するためだけに、ホームページのヒーローユニット内にh1を追加しました
  6. styles.css.scssファイルを追加し、@ import 'bootstrap'を含めました。スタイルシートへ
  7. Gitリポジトリを作成し、最初のコミットを実行し、コードをgitにプッシュしました
  8. Herokuアプリを作成し、マスターをherokuにプッシュしました

2回目の試みで、ホームページにナビゲーションバーを追加し（それが誰にも違いがある場合）、手順7と8を再度実行しましたが、これらの手順を実行する直前に次のコード行を実行しました。

Rails_ENV=production bundle exec rake assets:precompile

私はまだローカルホストで適切なスタイルを持っているサイトに行き着きましたが、Herokuで動作するスタイルはありませんでした。上記の最初の投稿で述べたように、application.rbファイルに追加する必要のあるコード行がありますが、ファイルにコード行を適切に追加する方法を理解していないため、従いませんでした。

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

たった今（2013年6月13日）、Herokuの開発者からこの回答をもらいました。これが、Herokuアプリで動作するlocalhostからcssディスプレイを取得した方法です。

「本番環境でアセットサービングを有効にし、ロガーを標準出力に設定してRails4がHerokuで動作するようにするだけです。現在、Rails 4アプリのデプロイプロセスをスムーズに進めていますとりあえず、コード内のこれらの行を変更するだけで、これらのgemは必要ありません。」（BretとNeilの素晴らしいニュースに感謝します）

/ config/environments/productionにあります。セットする：

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

ロガーの標準出力については知らないため、確認できません。

Git addを実行します。 git commit。

/config/database.ymlに以下が含まれていることを確認してください。

production:
  adapter: postgresql
  encoding: unicode
  database: Your_appname_production

以下のenvコマンドでこの情報が必要になります。

Gemfileに本番環境でgem 'pg'があることを確認してください。別のgitコミットを実行してください。

アプリのターミナルで次のコマンドを1行で実行します。

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

DATABASE_URL = postgresqlはymlファイルの本番アダプターと同一であり、Herokuは本番のみを実行しているように見えるため、Your_app_name_productionが指定されています。

私は反対されたが、必要はなかった。

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

バンドルインストールとHerokuでエラーが発生します。

これが役立つかどうかわからないが、私も生産を追加しました

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

私がそのアドバイスを見た場所を思い出せません。

HTHアレル

70
user2481435

ただ走れ bundle exec rake assets:precompile herokuにプッシュする前

18
JasmineOT

この2つのgemをアプリケーションに追加することで、この問題を修正できました

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

それを追加して、bundle installを実行し、Herokuにプッシュします。

スタイルの読み込みが開始されます。

8
DavidVII

まず、Rails betaから 最新リリース にアップグレードします。

設定する場所を確認しますconfig.assets.initialize_on_precompile = falseこれは、スプロケット以外のアセットの解決にフォールバックする可能性があるためです（Rails 3.xを読むときにfalseに設定した可能性があります）。

デフォルトに戻しますtrue

Ruby config.assets.initialize_on_precompile = true

次に、 user-env-compile 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

このbootstrap-sassの問題のコメント から適応。

4
glebm

セットする config.assets.compile=trueファイル内/config/environments/production.rb：

config.assets.compile=true

ここをクリックして確認してください アセットパイプラインの詳細。

4
snowblindzz

この英雄的な問題の単純な理由は、CSSファイルタイプの混在です。私の経験では、これは、.cssと.scssの両方のファイルタイプを含むアセットフォルダーをプッシュした場合に発生します。他の誰かがこれが起こる理由を説明できるかもしれません...しかし、私が必要としたのは、.cssファイルの名前を.scssに変更することだけでした。その後、すべてが正しくコンパイルされ、すべてが世界で正しかった。

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

config/envirnoments/production.rbでこれらを設定すると、Apacheサーバーに関する同様の問題が修正されました。

2
Dmitry Matveev

設定しませんでしたconfig.assets.compile = trueこれはパフォーマンスに影響を及ぼします（ただし機能します）。

ここに概説されているように： 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