blueprint/screen.css 未预编译

Posted

技术标签:

【中文标题】blueprint/screen.css 未预编译【英文标题】:blueprint/screen.css isn't precompiled 【发布时间】:2011-11-18 14:27:21 【问题描述】:

我一直在关注 Michael Hartl 的优秀 RoR 教程,但我使用的是 RoR 3.1。我是 RoR 3.1 的新手,需要与资产管道相关的帮助。这是我的问题:

在继续第 5.3 节之前,我想我想推到 Heroku,看看事情是如何发展的。令我惊讶的是,“GET /”导致错误 500。在我的本地开发环境中一切正常。然后我尝试在生产环境 (rails s -e production) 下运行我的本地 sample_app。结果相同,错误 500:

Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Pages#home

Showing /Users/john/Projects/sample_app/app/views/layouts/_stylesheets.html.erb where line #4 raised:

blueprint/screen.css isn't precompiled

支持信息:

    我将 blueprint CSS 目录放在 vendor/assets/stylesheets 下。

    我遵循 Michael 的第 13.1.4 节建议,并将以下内容作为我的 app/views/layouts/application.html.erb:

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <%= render 'layouts/stylesheets' %>
        <%= stylesheet_link_tag "application" %>
        <%= javascript_include_tag "application" %>
        <%= csrf_meta_tags %>
      </head>
      <body>
        <div class="container">
          <%= render 'layouts/header' %>
          <section class="round">
            <%= yield %>
          </section>
          <%= render 'layouts/footer' %>
        </div>
      </body>
    </html>
    

    app/views/layouts/_stylesheets.html.erb 的内容:

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
    <%= stylesheet_link_tag 'blueprint/print',  :media => 'print' %>
    <!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
    

    我已经运行了 bundle exec rake assets:precompile。

    public/assets/manifest.yml 的内容:

    ---
    logo.png: logo-8e0a5ad292fbb13a2b07e68fa3995406.png
    rails.png: rails-bd9ad5a560b5a3a7be0808c5cd76a798.png
    blueprint/plugins/buttons/icons/cross.png: blueprint/plugins/buttons/icons/cross-2ebcd25368006d1b7b0c5b7d6b523ab3.png
    blueprint/plugins/buttons/icons/key.png: blueprint/plugins/buttons/icons/key-55237526967cbcab3e8cfb12f0029d88.png
    blueprint/plugins/buttons/icons/tick.png: blueprint/plugins/buttons/icons/tick-3f5fc1f52b505b93f88263e0432d25ce.png
    blueprint/plugins/buttons/readme.txt: blueprint/plugins/buttons/readme-3ff7f5dbb0288d71f70682fdbe9d86ec.txt
    blueprint/plugins/fancy-type/readme.txt: blueprint/plugins/fancy-type/readme-e7ed185d1a9f23256d418ab929b464d9.txt
    blueprint/plugins/link-icons/icons/doc.png: blueprint/plugins/link-icons/icons/doc-b071fd74b88ff38cda8360a53f493013.png
    blueprint/plugins/link-icons/icons/email.png: blueprint/plugins/link-icons/icons/email-28104e72b3418737d4b9b329c12ec358.png
    blueprint/plugins/link-icons/icons/external.png: blueprint/plugins/link-icons/icons/external-ee6d976ddb80125fafe1a33c6f8aed10.png
    blueprint/plugins/link-icons/icons/feed.png: blueprint/plugins/link-icons/icons/feed-59bc8604661681639d25cb7015a32c38.png
    blueprint/plugins/link-icons/icons/im.png: blueprint/plugins/link-icons/icons/im-afeeb6e0b652c1edb1441bf0fb428596.png
    blueprint/plugins/link-icons/icons/lock.png: blueprint/plugins/link-icons/icons/lock-d73c4b3b57ce72cb6dbd8b265507ff75.png
    blueprint/plugins/link-icons/icons/pdf.png: blueprint/plugins/link-icons/icons/pdf-c4c543e5103a8516839a7846b91e1ac4.png
    blueprint/plugins/link-icons/icons/visited.png: blueprint/plugins/link-icons/icons/visited-fb2370448bc4ea5d079e963a8c0d900b.png
    blueprint/plugins/link-icons/icons/xls.png: blueprint/plugins/link-icons/icons/xls-5399729cd31dffc492a04b3805cd0be1.png
    blueprint/plugins/link-icons/readme.txt: blueprint/plugins/link-icons/readme-42c02030199cd36a671d4b623cb4dc36.txt
    blueprint/plugins/rtl/readme.txt: blueprint/plugins/rtl/readme-8d11bf76e19fb3fc7dbc6c2ddb54b92d.txt
    blueprint/src/grid.png: blueprint/src/grid-973add038ed86febca85f03e8b35b94a.png
    jquery-ui.min.js: jquery-ui-7e33882a28fc84ad0e0e47e46cbf901c.min.js
    jquery.min.js: jquery-8a50feed8d29566738ad005e19fe1c2d.min.js
    application.js: application-a552e1db33b8be6a42eedf1261916f3c.js
    application.css: application-214e0c0742f20b334e8a7776e0a4c71d.css
    

    我在 manifest.yml 中看不到 blueprint/screen.css。

我错过了什么?

【问题讨论】:

【参考方案1】:

来自http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

如果您有其他清单或单独的样式表和 JavaScript 文件要包含,您可以将它们添加到预编译数组中

这意味着在您的 config/environments/production.rb 中,您设置

config.assets.precompile += %w( blueprint/screen.css blueprint/print.css )

或一个包罗万象:

config.assets.precompile += %w( *.css *.js )

【讨论】:

我不是资产管道的架构师,但我的猜测是默认情况下您只想预编译清单文件,因为重点是要有一个 js 文件和一个 css整个应用程序的文件。这就是这个概念的全部美妙之处。因此,如果您有这种非常特殊的需求,需要将资产与主清单分开,您应该对此非常具体。这有意义吗? 并且您不想“config.assets.precompile += %w( *.css *.js )”,因为这会使您的公共/资产目录中包含大量未使用的文件(清单中已经包含的文件,例如 application.js) 您还必须在部署之前运行 bundle exec rake assets:precompile。 有没有人注意到@mhartl 本人在这里发表了评论? 您应该小心使用 *.css 和 *.js。如果您有包含样式表的 gem,所有的样式表都会被加载。例如。我将 bootswatch 用于我的一个项目。这有几个不同的 scss 样式文件。使用 *.css 时,我会遇到样式冲突,并且无法正确加载内容 => 预编译不起作用。【参考方案2】:

我在 application.css 文件中添加了对蓝图样式表的引用。这样我就不用改布局来修改样式表了,我只需要修改application.css文件,运行rake assets:precompile,重启webserver(如果webrick或者类似的话)。

我的 application.css 目前看起来像这样:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree ./blueprint
 *= require_tree . 
 */

【讨论】:

好的,但有时需要将 css 和 js 存储在单独的文件中。例如,出于性能目的。【参考方案3】:

您可能希望如上所述在生产环境中预编译您的资产。 如果你使用 capistrano,你可以在代码更新后这样做:

require 'bundler/capistrano'

after 'deploy:update_code' do  
  run "cd #release_path; RAILS_ENV=#rails_env bundle exec rake assets:precompile"
end

【讨论】:

【参考方案4】:

根据我自己解决此问题的经验,我还阅读了 Michael Hartl 的优秀 RoR 教程,我认为此时可能会遗漏一个步骤...

bundle exec rake assets:precompile    
git add public/assets
git commit -m "vendor compiled assets"
git push heroku

我找到了这个here。

【讨论】:

以上是关于blueprint/screen.css 未预编译的主要内容,如果未能解决你的问题,请参考以下文章

Heroku 上的“application.css 未预编译”错误,CDN 上有远程资产

rails 3.1.0 ActionView::Template::Error(application.css 未预编译)

Rails ActionView::Template::Error(google_analytics.js 未预编译)

即使在 config/initializers/assets.rb 中声明,Sprockets Rails Helper Asset 也未预编译

Chrome 64 Mobile Android 未预加载且未自动播放静音视频

“该文件尚未预编译,无法请求”