使用带有 bootstrap-sass gem 的 Rails 4 无法让 CSS 在 Heroku 上工作

Posted 2023-03-13

【中文标题】使用带有 bootstrap-sass gem 的 Rails 4 无法让 CSS 在 Heroku 上工作

【英文标题】：Can't get CSS working on Heroku using Rails 4 with bootstrap-sass gem

【发布时间】：2013-04-22 17:00:57

【问题描述】：

我已将一个应用程序部署到 Heroku，但我似乎无法解决一个问题。通过 Bootstrap-sass 的应用程序的 CSS 不会加载，因此我有一个未设置样式的应用程序。目前这只是静态页面的集合。

我已经按照自述文件https://github.com/thomas-mcdonald/bootstrap-sass 中的所有步骤进行操作，我无法弄清楚并且很可能是我的问题的步骤如下。由于 Rails 的更改会阻止在 vendor 和 lib 中编译图像，因此您需要将以下行添加到 application.rb：

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

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

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

提前感谢您提供的任何帮助。

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

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

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

RAILS_ENV=production bundle exec rake assets:precompile

我最终还是得到了一个在我的本地主机上具有正确样式的网站，但在 Heroku 上没有任何样式可用。正如我在上面的原始帖子中所指出的，有一行代码需要添加到 application.rb 文件中，由于我不了解如何将这行代码正确添加到文件中，我没有遵循。

宝石文件：

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'

【问题讨论】：

在推送到heroku之前你是否预编译了css

不清楚您到底做了什么（除了“按照这些说明操作），您能准确地写下您做了什么吗？

@AndyHayden 我在我尝试过的步骤中添加了

要回答您的第一个问题，请将config.assets.precompile 放在其他config.assets 行之一之后（与缩进匹配的好主意）。重要的是它在结束之前。

恐怕我不确定第二个，但是当你花时间编辑时，我投了赞成票。祝你好运。

【参考方案1】：

我可以通过将这两个 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。

你的样式应该开始加载了。

【讨论】：

谢谢，解决了我的资产未找到（404）的问题，尽管一切似乎都可以预编译。

您可能需要考虑将这两行包装在一个生产组中，因为它可能最终导致其他本地实例出错。

这里到底发生了什么？

它帮助提供静态资产。这个答案实际上已经过时了，它已经被rails_12factor gem 取代了。更多信息here

【参考方案2】：

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

“您需要做的就是在生产中打开资产服务并将记录器设置为标准输出，以使 Rails4 在 Heroku 上运行。我们目前正在努力简化 Rails 4 应用程序的部署过程，但与此同时，您只需更改代码中的这些行，您就不需要这些宝石。” （感谢 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 提交。

确保 /config/database.yml 有：

production:
  adapter: postgresql
  encoding: unicode
  database: Your_appname_production

下面的 env 命令需要此信息。

确保您的 Gemfile 中有 gem 'pg' 在生产中 再做一次 git commit。

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

env RAILS_ENV=production DATABASE_URL=postgresql://user:pass@127.0.0.1/Your_app_name_production bundle exec rake assets:precompile 2>&1

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

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

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 阿雷尔

【讨论】：

config.assets.compile = true 是我缺少的步骤

对我来说，这四个坏男孩都是：config.cache_classes = trueconfig.serve_static_assets = trueconfig.assets.compile = trueconfig.assets.digest = true

config.assets.compile = true 不应该对性能非常不利吗？

停止传播 config.assets.compile = true 是解决方案。是的，它可以工作，但缺点对应用程序的性能不利，因为如果没有这些文件的静态版本，它必须动态编译 css-js 文件。 config.assets.compile = false 强制您静态提供所有文件，如果缺少一个或多个文件，那么您的应用会引发 500/404 错误。

作为这个出色答案的一个旁注。您实际上不需要在 /config/database.yml 中设置任何内容，因为 Heroku 无论如何都会覆盖它。这可以在：devcenter.heroku.com/articles/ruby-support#build-behavior 看到。如果你愿意，你可以 .gitignore 文件。或者将其用于使用不同数据库的另一个生产环境。虽然 Heroku 编辑我们的代码有点烦人......在这种情况下，它很有意义并确保数据库连接正常工作。

【参考方案3】：

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

在 config/envirnoments/production.rb 中设置这些为我解决了与 apache 服务器类似的问题

【参考方案4】：

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

【讨论】：

这对我来说已经完成了，即使上面的所有其他内容都设置为 true，我也必须执行此步骤。

+1 非常感谢@JasmineOT！希望引起对您（更当前）解决方案的更多关注。当所有其他方法都失败时，这也对我有用。这是一个链接到官方 Heroku Docs 的链接（对于那些挖掘这种东西的人：devcenter.heroku.com/articles/rails-asset-pipeline）

最佳答案，为我做的

我知道这已经很老了，但是这有什么陷阱吗？比如如果我更改了我的任何资产文件中的任何内容，我是否必须再次运行它才能使这些更改生效？

@Rocco 恐怕是这样。

【参考方案5】：

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

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

【参考方案6】：

首先从 Rails 测试版升级到 the latest release。

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

将其设置回默认值true

ruby config.assets.initialize_on_precompile = true

然后在heroku上为应用启用user-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

改编自this bootstrap-sass issue comment。

【参考方案7】：

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

config.assets.compile=true

Click here to know 更多关于资产管道的信息。

【参考方案8】：

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