Scss不工作

Question

所以我有我的navbar 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; 
     } 
    } 
} 
} 

这是我的应用程序n.scss

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

林导入_posts.scss我application.scsss就像我跟我_navbar.scss。只是不明白为什么它似乎没有影响我的帖子。使用im导轨5和引导4.0.0.alpha3

Answer 1

其实，这个问题是不是下划线。问题是.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）变化指数.html.erb到这样的事情（请确保您加入关闭格到_posts.html.erb）：

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

选项3）从您的_posts删除.posts.index。SCSS文件中像下面：

.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

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