Rails 项目 .scss 部分文件未加载

Question

我有一个名为“_teapot_card.scss”的 css 卡组件文件，位于通常的“组件”文件夹中，以及其他 css 组件（正在工作），例如导航栏。

它已通过 @import 包含在相关的 _index.scss 文件中。

我对拼写进行了三重和四重检查，进行了硬刷新并重新启动了 Rails 服务器，但由于某种原因，当我提供页面时（我处于开发环境中），该文件不会加载。

页面上显示所有内容（图片、文本等），但是该 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";

_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;
    }
  }
}

Answer 1

我找到了解决方案——运行cli命令

rails assets:clobber

然后重新启动服务器解决了问题。不幸的是我仍然不知道原因，但至少文件正在工作并且样式现在正在应用。