部署到 Heroku 后未加载更新的 CSS 样式表？答案

【问题标题】：Updated CSS Stylesheet not loaded following deployment to Heroku?部署到 Heroku 后未加载更新的 CSS 样式表？
【发布时间】：2014-10-16 19:14:26
【问题描述】：

这对我来说已经有一段时间了，但我仍然无法弄清楚资产管道在 Rails 4 中是如何工作的。我终于学会了如何预编译资产，但在部署后又一次，我的 CSS样式表没有更新。

我通过转到开发人员工具并查看源代码确认了这一点。它看起来与我的 CSS 文件不同。我的猜测是问题出在我的 production.rb 文件中。

Production.rb

Games::Application.configure do

  config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.serve_static_assets = true
  config.assets.js_compressor = :uglifier
  config.assets.compile = true
  config.assets.digest = true
  config.assets.version = '1.0'
  config.log_level = :info
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.log_formatter = ::Logger::Formatter.new
end

Application.rb

require File.expand_path('../boot', __FILE__)

require 'rails/all'

Bundler.require(*Rails.groups)

module Games
  class Application < Rails::Application
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
    config.exceptions_app = self.routes
  end
end

这是我的 Application.html.erb 文件和助手。

<!DOCTYPE html>
  <html>

    <head>
      <title><%= @title %></title>
      <%= stylesheet_link_tag    "application", media: "all",
      "data-turbolinks-track" => true %>
      <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
      <%= csrf_meta_tags %>
    </head>

    <body>

      <%= yield %>

      <%= render 'layouts/footer' %>

    </body>

  </html>

宝石文件

gem 'rails', '4.0.4'

group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
end

group :production do
  gem 'pg', '0.17.1'
  gem 'rails_12factor'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
end

gem 'sass-rails', '~> 4.0.2'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'sprockets-rails', '~> 2.0.0'
gem 'bootstrap-sass', '2.3.2.0'

gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'

这是我采取的步骤

heroku run rake assets:precompile RAILS_ENV=production
git add .
git commit
git push heroku master

现在，也许我弄错了，但是运行了 git add 。（意味着添加所有文件）它也应该加载最新的样式表。但是再一次，Heroku 似乎失败了。

这以前发生过，而且越来越烦人，所以我想找到一个解释。

感谢您的宝贵时间。

编辑：

我想我现在知道问题所在了。我的样式表永远不会更新到我的 public/assets 文件夹。我不知道我能做些什么让它们出现在那里。

【问题讨论】：

如何在布局中包含 css 文件？

标签： css ruby-on-rails ruby heroku asset-pipeline

【解决方案1】：

好的，让我解释一下这应该如何为您工作

预编译

预编译您的资产将为您提供“不同”的文件/样式表。

这是因为预编译过程将MD5 哈希附加到资产文件的文件名中 - 为生产环境定义它们。这叫"asset fingerprinting"：

指纹是一种使文件名依赖的技术关于文件的内容。当文件内容发生变化时，文件名也改变了。对于静态或不频繁的内容改变，这提供了一种简单的方法来判断一个版本的两个版本是否文件是相同的，即使跨不同的服务器或部署日期。

本质上，预编译是 Rails 将您的资产文件minify 用于生产的一种方式。为什么这很重要？几个原因——效率、文件大小和concatenation：

在生产环境中 Sprockets 使用指纹方案以上概述。默认情况下，Rails 假定资产已经预编译并将由您的网络服务器作为静态资产提供。

静态资产

当您上传到 Heroku 并在任何其他生产环境中运行时，Rails 会期望您的资产被预编译。

预编译希望您的资产位于 public/assets 文件夹中 - 允许您的应用程序在准备好时调用它们。这样做的问题是，如果您的资产没有预编译，它可能会导致一些错误

您没有提到您遇到的具体问题是什么。内容有很多问题：

您需要使用asset path helpers 引用您的资产

您需要确保已在布局等中调用了资产

您需要确保您拥有正确的文件

这是您需要做的底线：

$ rake assets:precompile RAILS_ENV=production

这将在本地预编译您的资产

然后，您需要确保在布局中正确引用了资产：

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application" %>

这将使您能够在整个 Rails 应用程序中调用预编译的资产。这不包括语法问题，您可能会阻止预编译过程继续进行

【讨论】：

优秀的帖子和重要的信息。但是，看起来我已经遵守了这些步骤，但我的样式表仍未加载。不过，我在帖子中添加了更多信息。

【解决方案2】：

关注这个

rake 资产：预编译
git 添加。
git commit -am "你的提交信息"
git push heroku master

这应该是可行的。

【讨论】：

那也行不通。样式表仍然不在 public/assets 中。

【解决方案3】：

看起来你已经在你的 git repo 中添加了资产预编译文件。理想情况下，它不应该存在，因为 heroku 可以在您 push 时为您执行此操作。

要解决这个问题，你必须这样做

git rm -r public/assets/
在您的.gitignore 文件中添加public/assets/**
git add .
git commit -am "allow heroku auto assets precompilation"
git push heroku master

【讨论】：

我已将赏金授予您。问题是我的 gitignore 文件。这解决了我的问题。
当我发现这个时，结束了对我来说压力很大的一天，谢谢！

【解决方案4】：

如果您使用 sass...在遇到所有其他麻烦之前...请确保您没有在资产文件夹中混合 .css 和 .scss 文件。
Heroku 在编译资产时似乎很难将两者混合在一起。我无法解释为什么会这样，或者我的陈述是否属实……但是，根据我自己的经验，我必须做的就是解决这个问题，只需将任何 .css 文件重命名为 .scss。而且，下一次推送……一切都正确加载了。

【讨论】：

这为我修好了！很惊讶这在 2017 年仍然是一个问题。

【解决方案5】：

如果您在阅读这些解决方案时没有成功，还需要考虑其他事项。

阻止我的 css/scss 文件在生产中更新的原因是我忽略了将 .sass-cache 添加到 .gitignore，因此该文件夹已提交给修订控制，从而覆盖了生产中的更改。

【讨论】：