publicにcssファイルを置くと動くが、assets precompileするとcssファイルが適用されてない

Question

ボタン上にマウスをおくとボタンにある文字の色を変換するcssを使おうとしてます。

railsのpublic/
下にcssファイルを置くと期待通り正常に動きましたが、

app/assets/stylesheet/
下においてasset precompile実行してみると予想した動きになりません。

chromeのdeveloper toolsでcompileされたcssファイルがあるかみてみましたが、
該当cssファイルはちゃんと含まれてました。

この場合、他考えられる原因がありましたら教えていただけますか。
またcssファイルが適用されてない場合、原因を調べられるトラブルシューティング方法がありましたらご教示いただけますでしょうか

念のため適用しようとしてるcssの設定を貼り付けておきます。

a,a:hover {
	color: #d43076;
}

.intro .page-scroll a:hover {
	color: #d43076;
}

.icon:hover .fa{
	color: #d43076;
}

ul.nav li a:hover {
	color: #d43076;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background-color: #d43076;
}

.bg-skin {
	background: #d43076;
}

form#contact-form input:focus,form#contact-form select:focus,form#contact-form textarea:focus {
	border-color: #d43076;
}

footer {
    background-color: #d43076;
}

.btn-skin {
  color: #fff;
  background-color: #d43076;
  border-color: #d43076;
}

以上、よろしくお願いします

Answer 1

CSSが適用されないという意味をもう少し詳しく教えてください。
適用されないとは、

• CSSが「何も」適用されていない
• 更新したが更新した部分が適用されない

のどちらになりますでしょうか？

また、assets precompileしたstylesheetはpublic配下に吐き出されていますか？
ちょっとココ僕の方でも確かではないのですが、たしかrailsは静的リソース（cssとか）を見つけに行く順番はpublic配下→app/assets配下だったきがします。

もしかしたら以前precompileしたファイルを参照していてapp/assets/stylesheets配下のcssを見に行ってないのかもしれないですね。

もしその場合はbundle exec rake assets:cleanをしてprecompileしたファイルを削除してみてください

Answer 2

考えられる原因

1. layouts/application.html.erb

でapplication.cssが読み込まれていない。
解決方法
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>を追記
0. cssの適用が後ろ勝ちしている
同じcssがあると後ろの値のみ適用される
解決方法
app/assets/stylesheets/application.cssで
読み込む順番を変える。

こんな感じですかね、私もcss自体はそんなに詳しくないので。