2016-08-03 167 views
0

我似乎無法讓我的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"> 

當我渲染網頁,文本顯示出來,但沒有圖形。我檢查了服務器應用程序/文件夾和圖像,css和js文件似乎在那裏。

我做了一個rake資產:預編譯。從我附加的圖像看來,這有一些造型工作。

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 

如果我看着我的生產日誌,我看到的風格和樣式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將提供靜態資產「開箱即用」

這將是一個低使用率的網站,所以我可以用剛開的軌道提供靜態的資產活(我試過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"> 

enter image description here

+0

位於您的應用程序在您的css文件? – Sravan

+0

問題出在style.css中。我需要將圖像稱爲images/header.jpg而不是header.jpg。 –

回答

1

就到你的應用程序/資產/樣式表/ application.css或.scss或.sass然後包括你的樣式從application.rb中

刪除它們,如果你have aplication.css

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

如果你有aplication.sass

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

如果你有aplication。SCSS

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

現在您的問題必須被解決