Techioz Blog

Rails プロジェクトの .scss 部分ファイルがロードされていません

概要

「_teapot_card.scss」という CSS カードのコンポーネント ファイルが、ナビゲーションバーなどの他の CSS コンポーネント (動作している) とともに、通常の「components」フォルダーにあります。

@import を介して、関連する _index.scss ファイルに組み込まれています。

スペルを 3 重、4 重にチェックし、ハードリフレッシュを実行し、Rails サーバーを再起動しましたが、何らかの理由で、ページを提供するときにこのファイルが読み込まれません (開発環境にいます)。

ページにはすべて（写真、テキストなど）が表示されますが、その 1 つの scss ファイルのスタイルが存在せず、その理由がわかりません。

関連する HTML.ERB および .SCSS ファイルは以下のとおりです。

HTML

<div class="all-teapots-container">
  <% @teapots.each do |teapot| %>
    <div class="teapot-card">
      <div class="card-picture">
        <%= cl_image_tag(teapot.images.first.key, width: 300, height: 300, crop: :fill) %>
      </div>
      <div class="card-info-container">
        <div class="dimension-box">
          <%= image_tag "dimensions.png" %>
          <p class="teapot-height-text">H: <%= teapot.height %> mm</p>
          <p class="teapot-width-text">W: <%= teapot.width %> mm</p>
          <p class="teapot-depth-text">D: <%= teapot.depth %> mm</p>
        </div>
        <div class="capacity-box"><%= image_tag "capacity.png" %>
          <p class="teapot-ccs-text"><%= teapot.ccs %> cc</p>
        </div>
        <p>Weight: <%= teapot.weight %></p>
      </div>
    </div>
  <% end %>
  <%= pagy_nav(@pagy).html_safe %>
</div>

_index.scss

@import "carousel";
@import "confirmation_button";
@import "navbar";
@import "teapot_card";
@import "text";
@import "wallpaper";

_ティーポット_カード.scss

.teapot-card {
  background-color: $dark-gray;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 0 5px white;
  display: flex;
  gap: 5px;

  .card-info-container {
    .dimension-box {

      img {
        max-width: 150px;
        height: auto;
      }
      p {
        color: green;
      }
    }

    .capacity-box {
      max-width: 150px;
      height: auto;
    }
  }
}

解決策

解決策を見つけました – cli コマンドを実行しました

rails assets:clobber

その後サーバーを再起動すると問題が解決しました。残念ながら原因はまだわかりませんが、少なくともファイルは機能しており、スタイルが適用されています。