現象

railsにおいてcssがうまく反映されません。
cssを変更したのにも関わらず、反映されず、また変更前の、過去のものが反映されたままになってしまいます。
何が原因でどのような対処を行えばよいのでしょうか？

試したこと

・CSSの記述をすべて削除
→変化はなく、過去のCSSが適用される

・検証機能を使いどのようになっているか確認
→CSSが適用されていた

・webのキャッシュの削除
→変化なし。chrome以外のブラウザーでも変わらず

該当箇所のコード

app/assets/stylesheets/home.scss

scss
1.header-right a{
2  color: blue;
3}

↑青色を指定しているにも関わらず、黄色で表示されてしまう…
検証機能でも黄色が選択されていることになっている。

app/views/home/top.html.erb

erb
1<body>
2  <header>
3    <div class="container">
4      <div class="header-right">
5        <a href="http://localhost:3000/about">アプリの説明</a>
6        <a>新規登録</a>
7        <a href="http://localhost:3000/mypage">ログイン</a>
8      </div>
9  </header>
10</body>

補足

他の場所にcssを記載はしていません。
開発環境で作業をしています。
railsのバージョンは5.2.3です。
稚拙な質問ですが、ご教授よろしくお願いいたします。

追記

aplication.scss

scss
1 /*
2* This is a manifest file that'll be compiled into application.css, which will include all the files
3* listed below.
4*
5* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7*
8* You're free to add application-wide styles to this file and they'll appear at the bottom of the
9* compiled file so the styles you add here take precedence over styles defined in any styles
10* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
11* file per style scope.
12*
13*= require bootstrap
14*= require_tree .
15*= require_self
16*/
17 
18 @import "bootstrap";
19 @import "home";

@import "home"は記載がないとなぜかcss自体が反映されなかったので、ここに記述しました。

views/layouts/aplication.html.slim

slim
1doctype html
2html
3  head
4    title
5      | AppTest
6    = csrf_meta_tags
7    = csp_meta_tag
8    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
9    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
10  body
11    .app-title.navbar.navbar-expand-md.navbar-light.bg-light
12    .container
13      - if flash.notice.present?
14        .alert.alert-success= flash.notice
15      = yield

参照している教材がslimを使うことを推奨していたため、slim形式で記述しています。

行動規範の内容に同意します

回答3件

完全な解決とはいかなかったが、とりあえずの解決策

rake tmp:cache:clear

を実行することにより、変更が反映されるようになった。
しかし、変更のたびに実行しなければならず、完全な解決とは至らなかった。

投稿2019/10/18 13:46

puromin

総合スコア13

ベストアンサー

application.cssに下記を記載していないのではないでしょうか？

/*
 *= require_tree .
 *= require_self
 */

Railsチュートリアル：
https://railstutorial.jp/chapters/filling_in_the_layout?version=5.1#sec-sass_and_the_asset_pipeline

投稿2019/10/09 07:38

no1knows

総合スコア3365

puromin

2019/10/12 05:10

ご回答ありがとうございます。質問を更新したように記述してあります。そもそも、@import "home"としなければ、反映されないという現象も起きていました…

no1knows

2019/10/12 05:32

それでは問題を切り分けるために下記のCSSをaplication.scssの一番最後に記載ください。 .header-right a{ color: blue; } と記載してから思ったのですが、そもそもHTML側の記載がおかしい気がします。まずviews/layouts/application.html.erbの記載内容を提示ください。

puromin

2019/10/12 10:03

ご回答ありがとうございます。上記のcssを記載してみましたが、特に変化なしです。 htmlも併せて追記させていただきましたので、ご確認お願いいたします。

no1knows

2019/10/12 10:31

top.html.erbの<body>タグを削除してください。 1行目の<body>と最後の行の</body>です。 application.html.slimの<body>タグの中のyieldでtop.html.erbを読み込んでいるのに、さらに<body>タグを読み込むのは不思議な感じがします。それでCSSは反映されますか？また他に気になるのは、slimとerbの混合です。 slimに関しては知識不足なのでなんともいえないですが…

puromin

2019/10/14 03:14

ご回答ありがとうございます。すぐにご返信いただけているのに、こちらの返答が遅くなってしまいすみません。ご指摘いただいたものを後程試してみます。また、slimに関しても一度使用せずにやって見ます。作業が完了し次第改めてご返信させていただきます。よろしくお願いいたします。

puromin

2019/10/18 13:44

返信できておらず失礼いたしました。 slimをすべてrb形式に直し、ご指摘いただいことを実行してみましたが、できませんでした...

行動規範の内容に同意します

実行環境は developmentですか？　production ですか？

もし development ですと、私の理解の外です。
production ですと、　rails assets:precompile をしていないのでは？

投稿2019/10/08 13:00