2017-11-30 11 views
0

私は、コアCSSの基本的なものではなく、サイトで使用する色を指定する方法を追加したいと考えています。私は以下のコードでこれを達成しましたが、私のHerokuホストされたプロダクション環境、特にカスタムドメインとDNSがCloudflare経由でルーティングされている環境では動作しません(つまりmy-app.herokuapp.comでは動作しますがwwwでは動作しません)。 my-custom-domain.com)。カスタムCSSファイルをブラウザ(ページソース経由)で直接開き、CSSをサイトに反映させると、そのCSSファイルがサイトに反映されます。これはHerokuの制限ですか?クラウドフレア?私のアプローチは理想的ではない?Rails 5 - カスタムドメインのHerokuでユーザー指定のCSSが動作しない

ビュー/レイアウト/ application.html.erb:

<html> 
    <head> 
    ... 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => 'reload' %> 
    <% if the user is signed in and has selected custom colors %> 
     <%= stylesheet_link_tag(application_custom_colors_path(format: :css), media: 'all', 'data-turbolinks-track' => 'reload') %> 
    <% end %> 
    ... 
    </head> 
</html> 

application_controller.rb

def custom_colors 
    @color1 = current_user.color1 
    @color2 = current_user.color2 
    respond_to do |format| 
    format.css 
    end 
end 

ビュー/アプリケーション/ custom_colors.css.erb

body { 
    color: <%= @color1 %>; 
} 

私が言ったようにこれは私のローカルマシンで動作し、標準のmy-app.herokuapp.comドメインを使用してHerokuに配備されますが、 Cloudflareを使用してカスタムドメインを使用する場合に動作します。どんな指導も大変ありがとうございます。

ページのソース:

<link rel="stylesheet" media="all" href="/assets/application-3fac9a8b9a23a84ee912eb6f5438eff5514038c3646ef0a547ebb512994b6ca4.css" data-turbolinks-track="reload" /> 
<link rel="stylesheet" media="all" href="/application/custom_colors.css" data-turbolinks-track="reload" /> 
+0

ブラウザのコンソールにエラーがありますか?この行がCloudflareドメインでどのくらい表示されているかをコピーできますか?(ブラウザのHTMLを意味します) – AntonTkachov

+0

@AntonTkachovコンソールエラーはありません。私は、my-app.herokuapp.comとwww.mycustomdomain.comのページの間で同じページソースを追加しました。 – CChandler81

+0

あなたの 'www.mycustomdomain.com/application/custom_colors.css'のURLをチェックしましたか? – AntonTkachov

答えて

0

はCloudFlareは、デフォルトでは、CSSやJavaScriptなど特定の拡張子を持つすべての静的コンテンツをキャッシュしてオンにします。これを回避するために、www.mycustomdomain.com/application/custom_colors.cssのキャッシュをバイパスするためにCloudflareアカウントにページルールを追加しました。詳細情報here

関連する問題