Question

所以我的导航栏scss工作得很好，但由于某种原因，我无法让任何scss在我的帖子上工作。我不知道为什么它不起作用。这是我的一些代码。

这是我的_posts.html.erb

<div class="col-sm-6 col-lg-4"> 
 <div class="card">
   <div class="card-topper" style="background-image: url();"></div>
    <div class="card-block">
        <h4 class="card-title"><%= link_to post.title, post %></h4>
        <p class="published-date">Published Today</p>
        <p class="card-text"><%= truncate(post.description, length: 130) %></p>
        <%= link_to "Read", post, class: "btn btn-read" %>
    </div>
</div>

我在我的帖子index.html.erb中调用它

<div class="row">
 <%=render @posts %>
</div>

这是我的_posts.scss

.posts.index {
 .card {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #181818;
    height: 400px;
    margin-bottom: 20px;
    .card-topper {
        height: 200px;
        width: 100%;
        background-size: cover;
        background-position: center;
    }
    .card-block {
        padding: 10px;
        .btn-read {
            background-color: #e8e8e8;
            font-weight: 300;
            border-radius: 0;
            color: black;
            &:hover {
                background-color: #d8d8d8;
            }
        }
        .card-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            a {
                color: black;
                text-decoration: none;
            }
        }
        .published-date {
            font-size: 0.8rem;
            color: #787878;
            font-weight: 300;
            margin-top: 0.3rem;
            margin-bottom: 0.3rem;
        }
        .card-text {
            font-size: 0.9rem;
        }
    }
}
}

这是我的application.scss

@import "bootstrap";
@import "navbar";
@import "posts";

我将_posts.scss导入我的application.scsss，就像我使用_navbar.scss一样。只是不明白为什么它似乎对我的帖子没有影响。我使用rails 5和bootstrap 4.0.0.alpha3

Answer 1

选项1： 将 _posts.scss重命名为posts.scss （删除下划线） 。（我更喜欢这种方式）。

选项2： 将 @import "posts";更改为@import "_posts"; （添加下划线）

我在.posts.index { ....中看到了_posts.scss，你是否用这些类包装你的帖子：

<div class="posts index">
  <div class="row">
    <%=render @posts %>
  </div>
</div>

Answer 2

实际上，问题不在于下划线。问题是 .posts.index ，并且由于您没有包含帖子和索引规则的元素，因此不会应用该样式。此外，您错过了_posts.html.erb文件中的结束 div 标记。你有三个选择：

选项1）将_posts.html.erb文件更改为此类（关闭 div ）：

<div class="col-sm-6 col-lg-4">
    <div class="posts index">
        <div class="card">
            <div class="card-topper" style="background-image: url();"></div>
            <div class="card-block">
                <h4 class="card-title"><%= link_to post.title, post %></h4>
                <p class="published-date">Published Today</p>
                <p class="card-text"><%= truncate(post.description, length: 130) %></p>
                <%= link_to "Read", post, class: "btn btn-read" %>
            </div>
        </div>
    </div>
</div>

选项2）将index.html.erb更改为类似的内容（确保将_ strong> div 关闭到_posts.html.erb）：

<div class="row">
    <div class="posts index">
        <%=render @posts %>
    </div>
</div>

选项3）从_posts.scss文件中删除 .posts.index ，如下所示：

 .card {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #181818;
    height: 400px;
    margin-bottom: 20px;
    .card-topper {
        height: 200px;
        width: 100%;
        background-size: cover;
        background-position: center;
    }
    .card-block {
        padding: 10px;
        .btn-read {
            background-color: #e8e8e8;
            font-weight: 300;
            border-radius: 0;
            color: black;
            &:hover {
                background-color: #d8d8d8;
            }
        }
        .card-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            a {
                color: black;
                text-decoration: none;
            }
        }
        .published-date {
            font-size: 0.8rem;
            color: #787878;
            font-weight: 300;
            margin-top: 0.3rem;
            margin-bottom: 0.3rem;
        }
        .card-text {
            font-size: 0.9rem;
        }
    }
}

Scss无效

2 个答案: