Scss funktioniert nicht

Question

Also ich habe meine Navbar scss funktioniert völlig in Ordnung, aber aus irgendeinem Grund kann ich nicht scss auf meine Beiträge arbeiten. Ich habe keine Ahnung, warum es nicht funktioniert. Hier ist ein Teil meines Codes.

Hier ist meine _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 dies ruft in meinen Beiträgen index.html.erb

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

Das ist mein _posts.scss

ist

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

Dies ist meine Anwendung n.scss

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

Im Import der _posts.scss meiner application.scsss so wie ich mit meiner _navbar.scss bin. Versteh einfach nicht, warum es keinen Einfluss auf meine Beiträge hat. Im mit Schienen 5 und Bootstrap 4.0.0.alpha3

Answer 1

Eigentlich ist das Problem nicht mit Unterstrich. Das Problem ist .posts.index und da Sie kein Element mit beiden Beiträge und Index Regeln haben, wird der Stil nicht angewendet. Außerdem verpassen Sie einen abschließenden div Tag in Ihrer _posts.html.erb-Datei. Sie haben drei Möglichkeiten:

Option 1) die _posts.html.erb Datei zu so etwas wie dies ändern sind diese (Schluss div hinzugefügt wird):

<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) Änderungsindex .html.erb zu so etwas wie dieses (stellen Sie sicher, hinzugefügt Schließen div _posts.html.erb):

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

Option 3) Entfernen Sie .posts.index von Ihrem _posts.SCSS Datei wie folgt vor:

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

Answer 2

Option 1:Umbenennen_posts.scss-posts.scss(entfernen unterstreichen). (Ich bevorzuge diesen Weg).

Option 2:ändern@import "posts"; zu @import "_posts";(add unterstreichen).

Ich sehe .posts.index { .... in Ihrem _posts.scss, haben Sie wickeln Ihre Beiträge mit diesen Klasse etwas, was wie folgt aus:

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