Rails项目中_teapot_card.scss局部样式文件无法加载求助

我在Rails项目的components文件夹中存放了一个名为_teapot_card.scss的CSS卡片组件文件，该文件夹内的其他组件（如navbar）均可正常工作。我已通过@import指令将该文件引入对应的_index.scss文件中，多次检查拼写、执行强制刷新并重启Rails服务器后，处于开发环境的页面仍无法加载该样式文件。页面中的图片、文本等内容均可正常显示，但该SCSS文件定义的样式完全不生效，无法确定问题原因。

相关HTML.ERB代码 #

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

排查建议 #

• 检查$dark-gray变量定义：SCSS中使用的$dark-gray变量如果未在_teapot_card.scss导入前定义，会导致编译失败。可以临时将background-color改为固定值（如#333）测试，看样式是否生效。
• 核对SCSS导入路径：确认_index.scss与components文件夹的层级关系，如果_index.scss在app/assets/stylesheets根目录，导入时可能需要写@import "components/teapot_card";，虽然其他组件正常，但再仔细核对路径拼写。
• 查看浏览器开发者工具：打开F12开发者工具，定位到.teapot-card元素，检查样式面板中是否存在对应的规则。如果完全没有，说明文件未被编译；如果存在但被划掉，可能是优先级问题，但当前情况大概率是编译未成功。
• 查看服务器编译日志：启动Rails服务器时，观察终端输出，是否有SCSS编译错误提示（如变量未定义、语法错误）。
• 清理资产缓存：执行rails assets:clobber命令清理旧编译资产，然后重启服务器重新测试。

内容的提问来源于stack exchange，提问作者Jason Sturgeon