不能让CSS在Heroku上使用Rails 4和bootstrap-sass gem吗

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-sass does not load up thus I have an un-styled app. At the moment this is just a collection of static pages.

我在Heroku上部署了一个应用程序，有一个问题我似乎弄不清楚。通过Bootstrap-sass应用程序的CSS没有加载，因此我有一个非样式的应用程序。

I have followed all but one step in the README https://github.com/thomas-mcdonald/bootstrap-sass The 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:

在README https://github.com/thomas-mcdonald/bootstrap-sass中，除了一步之外，我已经完成了我无法理解的步骤，并且很可能是我的问题如下。由于Rails的更改阻止了在供应商和lib中编译图像，您需要在应用程序中添加以下代码。

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.

由于我对编程还是很陌生，所以第一个问题是我不知道在应用程序中应该在哪里以及如何添加它。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.

第二个问题可能与我正在使用的gem有关，但是当我创建应用程序时，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. 创建了一个新的rails 4应用程序(gem文件如下)
3. Added the bootstrap-sass gem listed in the gem file below
4. 添加了下面gem文件中列出的bootstrap-sass gem
5. 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)
6. 将PG gem添加到我在生产组的gem文件中，并将SQLite3移动到开发和测试中(运行bundle安装——无需按照步骤2和步骤3进行生产)
7. created a pages controller for a static home page
8. 为静态主页创建页面控制器
9. Added an h1 within a hero-unit on the home page just to see if style was working
10. 在主页的英雄单元中添加h1，看看样式是否有效
11. added a styles.css.scss file and included @import 'bootstrap'; to the style sheet
12. 添加了一个styles。cssscss文件，包括@import 'bootstrap';的样式表
13. Created git repository, ran my initial commit and pushed the code to git
14. 创建git存储库，运行初始提交并将代码推到git
15. Created heroku app and pushed the master to heroku
16. 创建heroku app，将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上没有样式。正如我在前面的文章中提到的，有一行代码需要添加到应用程序中。由于不了解如何正确地将代码行添加到文件中，我没有遵循的rb文件。

Gemfile:

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'

8 个解决方案

#1

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 devs那里得到了这个答案，他的支持引导我跨越了障碍。这就是我如何在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应用程序的部署过程更加平滑，但与此同时，您可以在代码中修改这些行，而不需要这些精华。(感谢Bret和Neil的好消息)

In /config/environments/production. set:

在/ config /环境/生产。设置:

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.

我不知道logger中的stdout，所以不能检查它。

Do a git add . and git commit.

做一个git添加。和git提交。

Make sure that /config/database.yml has:

确保/ config /数据库。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提交。

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

在你的应用程序中的一个终端上运行这个命令:

env RAILS_ENV=production DATABASE_URL=postgresql://user:pass@127.0.0.1/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.

它在捆绑安装和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

HTH服装

#2

Just run bundle exec rake assets:precompile before pushing to heroku

只需运行bundle exec rake资产:在推到heroku之前进行预编译

#3

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 install and then push to heroku.

加上这个，运行bundle安装，然后推到heroku。

Your styles should start loading.

您的样式应该开始加载。

#4

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 = false as 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，因为这可能使它返回到非spro佝偻病资产解析(我猜您在阅读Rails 3时可能将它设置为false。x在heroku文档)。

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-compile for the app on heroku:

然后为heroku上的app启用用户-env-compile:

# 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问题评论。

#5

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

在文件/配置/环境/产品中设置config. asset. compile=true:

config.assets.compile=true

Click here to know more about the asset pipeline.

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

#6

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

设置这些配置/环境/生产。rb用apache服务器为我解决了一个类似的问题

#7

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

我不会设置config. asset. compile = true这对性能有影响(但它确实有效)。

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

概述:https://*.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"

#8

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文件类型的assets文件夹，就会发生这种情况。也许有人能解释为什么会这样……但是，我只需要将.css文件重命名为.scss。然后，一切都正确地编译，世界上一切都是正确的。