Scss not working

Question

So I have my navbar scss working perfectly fine but for some reason I cant get any scss to work on my posts. I have no clue why its not working. Here is some of my code.

Here is my _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>

Im calling this in my posts index.html.erb

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

This is my _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;
        }
    }
}
}

This is my application.scss

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

Im importing the _posts.scss to my application.scsss just like I am with my _navbar.scss. Just dont understand why it seems to have no impact on my posts. Im using rails 5 and bootstrap 4.0.0.alpha3

Answer 1

Option 1: Rename _posts.scss to posts.scss (remove underscore). (I prefer this way).

Option 2: Change @import "posts"; to @import "_posts"; (add underscore).

I see .posts.index { .... in your _posts.scss, did you wrap your posts with these class some thing like this:

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

Answer 2

Actually, the problem is not with underscore. The problem is .posts.index and since you have no element with both posts and index rules, the style is not applied. Also, you miss a closing div tag in your _posts.html.erb file. you have three options:

Option 1) Change the _posts.html.erb file to something like this this (closing div is added):

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

Option 2) Change index.html.erb to something like this (make sure you added closing div to _posts.html.erb):

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

Option 3) Remove .posts.index from your _posts.scss file like following:

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