質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.37%

Railsにおいて、CSSの変更が行われない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 910

puromin

score 13

現象

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

試したこと

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

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

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

該当箇所のコード

app/assets/stylesheets/home.scss

.header-right a{
  color: blue;
}


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

app/views/home/top.html.erb

<body>
  <header>
    <div class="container">
      <div class="header-right">
        <a href="http://localhost:3000/about">アプリの説明</a>
        <a>新規登録</a>
        <a href="http://localhost:3000/mypage">ログイン</a>
      </div>
  </header>
</body>

補足

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

追記

aplication.scss

 /*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require bootstrap
*= require_tree .
*= require_self
*/

 @import "bootstrap";
 @import "home";


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

views/layouts/aplication.html.slim

doctype html
html
  head
    title
      | AppTest
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  body
    .app-title.navbar.navbar-expand-md.navbar-light.bg-light
    .container
      - if flash.notice.present?
        .alert.alert-success= flash.notice
      = yield


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

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/12 19:31

    top.html.erbの<body>タグを削除してください。
    1行目の<body>と最後の行の</body>です。

    application.html.slimの<body>タグの中のyieldでtop.html.erbを読み込んでいるのに、さらに<body>タグを読み込むのは不思議な感じがします。

    それでCSSは反映されますか?

    また他に気になるのは、slimとerbの混合です。
    slimに関しては知識不足なのでなんともいえないですが…

    キャンセル

  • 2019/10/14 12:14

    ご回答ありがとうございます。
    すぐにご返信いただけているのに、こちらの返答が遅くなってしまいすみません。
    ご指摘いただいたものを後程試してみます。
    また、slimに関しても一度使用せずにやって見ます。

    作業が完了し次第改めてご返信させていただきます。
    よろしくお願いいたします。

    キャンセル

  • 2019/10/18 22:44

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/08 22:18

    ご回答ありがとうございます。
    実行環境はdevelopmentになります。

    キャンセル

0

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

rake tmp:cache:clear


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る