无法加载样式表答案

【问题标题】：Can't load the stylesheet无法加载样式表
【发布时间】：2016-12-08 14:39:31
【问题描述】：

我似乎无法让我的 rails 项目看到我的 style.css 或 style-responsive.css。

application.html.erb 包含

 <!-- From ruby begin --> 
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

    <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
  <%= stylesheet_link_tag "style" %>                        <!-- From template   -->
  <%= stylesheet_link_tag "style.ie7" %>                    <!-- From template   -->
  <%= stylesheet_link_tag "style.responsive" %>             <!-- From template   -->
  <%= javascript_include_tag "script.js" %>                 <!-- From template   -->

  <% # javascript_include_tag 'defaults' %>


  <%= csrf_meta_tags %> <!--  cross-site request forgery protection parameter   -->

<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="style.css" media="screen">
<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
<link rel="stylesheet" href="style.responsive.css" media="all">

当我渲染页面时，文本显示但没有图形。我检查了服务器 app/ 文件夹和图像、css 和 js 文件似乎在那里。

我做了一个 rake assets:precompile。从我附上的图片来看，似乎有一些造型工作。

Assets.rb 包含

 Rails.application. config.assets.precompile = ['*.js', '*.css', '*.css.erb']      #for Production
  Rails.application.config.assets.precompile += %w[*.png *.jpg *.jpeg *.gif]        #for Production
  Rails.application.config.assets.precompile += %w(script.js)
  Rails.application.config.assets.precompile += %w(script.responsive.js)
  Rails.application.config.assets.precompile += %w( style.css )
  Rails.application.config.assets.precompile += %w( style.responsive.css )
  Rails.application.config.assets.precompile += %w( style.ie7.css )

Production.rb 有

  # Apache or NGINX already handles this.
 config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
  # config.serve_static_files = true

如果我查看我的生产日志，我会看到 style 和 style-responsive.css 的错误

I, [2016-08-02T23:26:31.129752 #12930]  INFO -- : Started GET "/style.responsive.css" for 108.16.108.174 at 2016-08-02 23:26:31 -0400
I, [2016-08-02T23:26:31.133345 #12921]  INFO -- : Started GET "/style.css" for 108.16.108.174 at 2016-08-02 23:26:31 -0400
F, [2016-08-02T23:26:31.200006 #12921] FATAL -- : 
ActionController::RoutingError (No route matches [GET] "/style.css"):
  actionpack (4.2.5.2) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (4.2.5.2) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'

我认为数字海洋的 ubuntu/rails 将提供“开箱即用”的静态资产

这将是一个低使用率的网站，所以我可以忍受只用 rails 来提供静态资产（我试过 config.serve_static_files = true，但似乎没有用）

我相信更好的解决方案是确保 NGINX 提供静态文件，但我不确定如何检查。

另外，如果我查看页面源代码，我会看到指纹文件。如果我单击其中一个，我会看到 css 文件。

 <!-- The following is added to connect the template to ruby --> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" media="screen" href="/assets/style-bf197dd0f531130964616a51129935da1e598a02a4875c978ba88a1150f8c83b.css" />                        <!-- From template   -->
  <link rel="stylesheet" media="screen" href="/assets/style.ie7-0f23e9b569741aa18fa91789e00826aaee0273a38bc82afb353167975630e750.css" />                    <!-- From template   -->
  <link rel="stylesheet" media="screen" href="/assets/style.responsive-8d9d7ff8e357d6e354b2c30b39e501b0911171f97f4618b2b6ae29d23ac20991.css" />             <!-- From template   -->
  <script src="/assets/script-f4f7e1cb97bf4be4d67e931693643a62b9c0fbd4250eb7e1a26a8c0cf555f4e3.js"></script>                 <!-- From template   -->
<!--  < %= javascript_include_tag "jquery.are-you-sure" %>    -->   <!-- Dirty form checker   -->

我认为服务器正在 application.html.erb 中查找以下样式表。但是，如果我删除该代码块，我仍然没有得到我的图像，我也没有在我的日志中看到任何致命错误。我不确定下面的块是否必要。

<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">

【问题讨论】：

您的 css 文件在您的应用程序中的什么位置？
问题出在 style.css 中。我需要将图像称为 images/header.jpg 而不仅仅是 header.jpg。

标签： ruby-on-rails nginx unicorn digital-ocean

【解决方案1】：

只需转到您的 app/assets/stylesheets/application.css 或 .scss 或 .sass，然后将您的样式表从 application.rb 中删除

如果你有 aplication.css

//=require style
//=require style.responsive

如果你有 aplication.sass

@import 'style'
@import 'style.responsive'

如果你有 aplication.scss

@import "style";
@import "style.responsive";

现在你的问题一定已经解决了

【讨论】：