Ruby-on-rails 无法使用带有 bootstrap-sass gem 的 Rails 4 在 Heroku 上使用 CSS

Can't get CSS working on Heroku using Rails 4 with bootstrap-sass gem

提问by Kevin Dark

I have deployed an app to Heroku with one issue I can't seem to get figured out. The CSS for the app via Bootstrap-sassdoes not load up thus I have an un-styled app. At the moment this is just a collection of static pages.

我已经向 Heroku 部署了一个应用程序，但有一个我似乎无法弄清楚的问题。该应用程序的 CSSBootstrap-sass没有加载，因此我有一个无样式的应用程序。目前这只是静态页面的集合。

I have followed all but one step in the README https://github.com/thomas-mcdonald/bootstrap-sassThe step I can't figure out and highly likely to be my issue is as follows. Due to a change in Rails that prevents images from being compiled in vendor and lib, you'll need to add the following line to your application.rb:

我遵循了自述文件中的所有步骤https://github.com/thomas-mcdonald/bootstrap-sass我无法弄清楚并且很可能是我的问题的步骤如下。由于 Rails 中的更改阻止了在供应商和库中编译图像，您需要将以下行添加到您的 application.rb 中：

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

Since I am still very new to programming, the first issue is I have no clue where and how to add this within the application.rb file. I would greatly appreciate it if someone could help show me how and where to properly add the above line of code.

由于我对编程还是很陌生，第一个问题是我不知道在 application.rb 文件中的何处以及如何添加它。如果有人能帮助我展示如何以及在何处正确添加上述代码行，我将不胜感激。

The second issue could be related to the gems I am using however when I created the app, the sass-rails gem was installed with ~> 4.0.0.beta1. According to the README the version to use is 3.2. Since this also might be an issue, I have included the gem file incase anyone determines that is the underlying reason for my problem.

第二个问题可能与我正在使用的 gems 有关，但是当我创建应用程序时，sass-rails gem 安装了 ~> 4.0.0.beta1。根据自述文件，使用的版本是 3.2。由于这也可能是一个问题，我已经包含了 gem 文件，以防有人确定这是我问题的根本原因。

Thank you in advance for any help you can provide.

预先感谢您提供的任何帮助。

Edit: To add the steps I took on the first try that resulted in style working properly on my local host but not once the code was deployed to heroku.

编辑：添加我在第一次尝试时采取的步骤，导致样式在我的本地主机上正常工作，但在将代码部署到 heroku 后就不行了。

1. Created a new rails 4 app (gem file below)
2. Added the bootstrap-sass gem listed in the gem file below
3. Added PG gem to my gem file in the production group and moved SQLite3 to development and test (ran bundle install --without production following steps 2 and 3)
4. created a pages controller for a static home page
5. Added an h1 within a hero-unit on the home page just to see if style was working
6. added a styles.css.scss file and included @import 'bootstrap'; to the style sheet
7. Created git repository, ran my initial commit and pushed the code to git
8. Created heroku app and pushed the master to heroku

1. 创建了一个新的 rails 4 应用程序（下面的 gem 文件）
2. 添加了下面 gem 文件中列出的 bootstrap-sass gem
3. 在生产组中将 PG gem 添加到我的 gem 文件中，并将 SQLite3 移至开发和测试（运行 bundle install --without production 以下步骤 2 和 3）
4. 为静态主页创建了一个页面控制器
5. 在主页上的英雄单元中添加了一个 h1 只是为了查看样式是否有效
6. 添加了一个 style.css.scss 文件并包含了 @import 'bootstrap'；到样式表
7. 创建 git 存储库，运行我的初始提交并将代码推送到 git
8. 创建 heroku 应用程序并将 master 推送到 heroku

On the second attempt, I added a nav bar to the home page (if that makes a difference to anyone) and followed steps 7 and 8 again but just prior to doing those steps I ran the following line of code.

在第二次尝试中，我向主页添加了一个导航栏（如果这对任何人都有影响）并再次执行第 7 步和第 8 步，但在执行这些步骤之前，我运行了以下代码行。

RAILS_ENV=production bundle exec rake assets:precompile

I still ended up with a site that had the proper style on my local host but no style was working on Heroku. As I noted above in my original post, there is a line of code that needs to be added to the application.rb file that I did not follow due to my lack of understanding how to properly add the line of code into the file.

我最终还是得到了一个在我的本地主机上具有正确样式的站点，但在 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'

回答by user2481435

I just now (June 13 2013)got this answer from Heroku devs whose support guided me across the barriers. This is how I got my css display from localhost working in my Heroku app.

我刚刚（2013 年 6 月 13 日）从 Heroku 开发人员那里得到了这个答案，他们的支持引导我跨越了障碍。这就是我在 Heroku 应用程序中从 localhost 获取 css 显示的方式。

"All you need to do is turn on asset serving in production and set the logger to stdout to get Rails4 to work on Heroku. We are currently working on smoothing out the deploy process for Rails 4 apps but for the meantime, you can just change those lines in your code and you won't need those gems." (Thanks Bret and Neil great news)

“您需要做的就是在生产中打开资产服务并将记录器设置为 stdout 以使 Rails4 在 Heroku 上工作。我们目前正在努力使 Rails 4 应用程序的部署过程变得顺畅，但与此同时，您可以更改你代码中的那些行，你就不需要那些宝石了。” （感谢布雷特和尼尔的好消息）

In /config/environments/production. set:

在 /config/environments/production 中。放：

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

I do not know about the stdout in logger so can't check that.

我不知道记录器中的标准输出，所以无法检查。

Do a git add . and git commit.

做一个 git add 。和 git 提交。

Make sure that /config/database.yml has:

确保 /config/database.yml 具有：

production:
  adapter: postgresql
  encoding: unicode
  database: Your_appname_production

You will need this info for the env command below.

您将需要此信息用于下面的 env 命令。

Make sure you have gem 'pg' in production in your Gemfile Do another git commit.

确保你的 Gemfile 中有 gem 'pg' 在生产中做另一个 git commit。

Run this command in a terminal in your app on one line:

在应用程序的终端中的一行运行此命令：

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

Where DATABASE_URL=postgresql is identical to your production adapter in the yml file and Your_app_name_production is specified because Heroku only seems to run production.

其中 DATABASE_URL=postgresql 与 yml 文件中的生产适配器相同，并且指定了 Your_app_name_production 因为 Heroku 似乎只运行生产。

I was advised against and did not need:

我被建议反对并且不需要：

group :production do
  gem 'rails_log_stdout',           github: 'heroku/rails_log_stdout'
  gem 'rails3_serve_static_assets', github: 'heroku/rails3_serve_static_assets'
end

It errors out in bundle install and Heroku.

它在 bundle install 和 Heroku 中出错。

Don't know if this helps but I also added production to

不知道这是否有帮助，但我还添加了生产

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

Can't remember where I saw that advice.

不记得我在哪里看到的建议。

HTH Arel

哈雷尔

回答by JasmineOT

Just run bundle exec rake assets:precompilebefore pushing to heroku

bundle exec rake assets:precompile在推送到heroku之前运行

回答by DavidVII

I was able to fix this issue by adding these two gems to my application

我能够通过将这两个 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

Add that, run bundle installand then push to heroku.

添加它，运行bundle install然后推送到heroku。

Your styles should start loading.

您的样式应该开始加载。

回答by glebm

First of all upgrade from Rails beta to the latest release.

首先从 Rails beta 升级到最新版本。

Check for where you might be setting config.assets.initialize_on_precompile = falseas that might make it fall back to non-sprockets assets resolution (I'm guessing you might have set it to false when reading about Rails 3.x on heroku docs).

检查您可能设置的位置，config.assets.initialize_on_precompile = false因为这可能会使其回退到非链轮资产分辨率（我猜您在 heroku 文档上阅读 Rails 3.x 时可能已将其设置为 false）。

Set it back to the default true

将其设置回默认值 true

ruby config.assets.initialize_on_precompile = true

ruby config.assets.initialize_on_precompile = true

Then enable user-env-compilefor the app on heroku:

然后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

Adapted from this bootstrap-sass issue comment.

改编自这个 bootstrap-sass 问题评论。

回答by snowblindzz

Set config.assets.compile=truein the file /config/environments/production.rb:

config.assets.compile=true在文件中设置/config/environments/production.rb：

config.assets.compile=true

Click here to knowmore about the asset pipeline.

单击此处了解有关资产管道的更多信息。

回答by hellion

A simple reason for this heroic problem could be mixing css file types. In my own experience, this happens if you push out an assets folder that contains both .css and .scss file types. Maybe someone else can explain why this happens...but, all it took for me was to rename .css file(s) to .scss. Then, everything compiled correctly and all was right in the world.

这个英雄问题的一个简单原因可能是混合 css 文件类型。根据我自己的经验，如果您推出一个包含 .css 和 .scss 文件类型的资产文件夹，就会发生这种情况。也许其他人可以解释为什么会发生这种情况……但是，我所做的只是将 .css 文件重命名为 .scss。然后，一切都正确编译，世界上一切正常。

回答by cman77

I would not set config.assets.compile = truethis has performance implications (but it does work).

我不会设置config.assets.compile = true这对性能有影响（但它确实有效）。

As outlined here: https://stackoverflow.com/a/16882028/647427

如此处所述：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"

回答by Dmitry Matveev

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

setting these in config/envirnoments/production.rb fixed a similar problem for me with apache server

在 config/envirnoments/production.rb 中设置这些为我使用 apache 服务器修复了类似的问题