我的 application.js 无法工作，并且 application.css 不会在 Rails 中更新

Question

我将我的应用程序配置为在 Heroku 上运行，但我遇到了问题。在开发模式下，当我更改部分 CSS 并刷新浏览器时，我的 CSS 无法加载。

我检查了日志，但 application.css 没有加载。我需要它每次在开发模式下加载。此外，我的 application.js 停止工作，我不知道为什么。

开发.rb：

  # Do not compress assets
  config.assets.compress = false
  config.assets.precompile += %w( login.css )

  # Expands the lines which load the assets
  config.assets.debug = true

环境.rb：

  config.active_record.whitelist_attributes = true

   # Enable the asset pipeline
   config.assets.enabled = true

   # Version of your assets, change this if you want to expire all your assets
   config.assets.version = '1.0'

   config.assets.initialize_on_precompile = true

我使用 $ rake assets:precompile RAILS_ENV=development 手动编译资产，除了 application.js 代码之外它可以工作：

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.reveal
$(document).ajaxStart(function() {
    $( "#load_img" ).animate({
            height:"toggle",
      opacity:"toggle"
        });
});

$(document).ajaxSuccess(function() {
    $( "#load_img" ).fadeOut('fast');
});

$(document).ready(function() {
  setTimeout(
    function() {
      $("#flash_messages").fadeOut(3000)
    }, 
    2500);
});

在部署到 Heroku 之前一切正常。

Answer 1

在开发中预编译您的资产意味着您需要继续预编译它们以查看您所做的任何更改。

当您预编译资产时，这将在 public/assets 中创建一个静态 css 文件，并且您的网络服务器将始终提供静态资产（例如 public/assets 中的那些），然后再在资产管道中查找新文件。

通过手动清空public/assets 或调用rake assets:clean 来清理预编译文件。

当您部署到 Heroku 时，它会在部署时自动为您编译资产。

Answer 2

如果您想查看开发中的变化，您不应该预编译您的资产。要恢复预编译，请尝试rake assets:clean。此外，在清单文件application.js 中包含 js 代码也不是一个好样式。在app/assets/javascripts/ 中创建一个新文件并将代码移到那里。

Answer 3

您不需要application.js 文件本身。像这样使用require_self：

//= require jquery
...
//= require_self

$(function() {});

还很确定您应该在包含的结尾和application.js 文件本身的代码开头之间有一个换行符。

还有这一行：

config.assets.precompile += %w( login.css )

可能应该在application.rb 而不仅仅是development.rb，尽管如果您在部署到 Heroku 之前在开发模式下手动预编译资产，这无关紧要。