我有一个名为“_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;
}
}
}
我找到了解决方案——运行cli命令
rails assets:clobber
然后重新启动服务器解决了问题。不幸的是我仍然不知道原因,但至少文件正在工作并且样式现在正在应用。