I have a component file for a css card called “_teapot_card.scss” located in the usual “components” folder along with other css components (that are working) such as the navbar.

It has been included via @import in the relevant _index.scss file.

I have triple and quadruple checked the spellings, done a hard refresh and restarted the rails server, yet for some reason this file just won’t load when I serve the page (I’m in development environment).

Everything displays on the page (pictures, texts, etc) however the style from that one scss file just doesn’t exist, and I can’t figure out why.

Relevant HTML.ERB and .SCSS files below.

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";

_teapot_card.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;
    }
  }
}