Rails cssが反映されない

ruby on Railsでポートフォリオを作成しているのですが、コードに書いてもcssが反映されません。解決策を教えて頂きたいです。
よろしくお願いします。

下の画像はhttp://localhost:3000/homepage/indexのページです。bootstrapは反映されるのですが、cssが反映されない状態です。

/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>lyriiiiics</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <meta name="viewport" content="width=device-width">

    <!-- 以下、headの中はテンプレートのコピー -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

  </head>

  <body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-info fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Well Said!</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <% if user_signed_in? && current_user.role == '質問者' %>
              <%= link_to "POST", "/posts", class: "nav-link" %>
            <% elsif user_signed_in? && current_user.role == '回答者' %>
              <%= link_to "POST", "/posts", class: "nav-link" %>
            <% end %>   
          </li>
          <li class="nav-item">
            <% if user_signed_in? && current_user.role == '質問者' %>
              <%= link_to "MYPAGE", posts_mypage_path, class: "nav-link" %>
            <% elsif user_signed_in? && current_user.role == '回答者' %>
              
            <% end %>   
          </li>
          <li class="nav-item">
            <% if user_signed_in? %>
              <a><%= link_to "LOGOUT", destroy_user_session_path, class: "nav-link", :method => :delete %></a>
            <% else %>
              <%= link_to "LogIn", "/users/sign_in", class: "nav-link" %>
            <% end %>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
  <%= yield %>
  <footer class="py-5 bg-info">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
    </div>
  
  </footer>
  </body>
</html>

/views/homepage/index.html.erb

<!-- Page Content -->
<div class="container">
 
  <!-- Jumbotron Header -->
  <header class="jumbotron my-4">
    <h1 class="display-3">A Warm Welcome!</h1>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
    <a href="#" class="btn btn-primary btn-lg">Call to action!</a>
  </header>
 
  <!-- Page Features -->
  <div class="row text-center">
 
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>
 
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>
 
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>
 
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>
 
  </div>
  <!-- /.row -->
 
</div>
<!-- /.container -->

/assets/stylesheets/homepage.scss

// Place all the styles related to the homepage controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/


  /* 以下テンプレートagencyのcss*/

  #services {
    background:red;
    }
  
  body {
    overflow-x: hidden;
    font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  p {
    line-height: 1.75;
  }
  
  
  .text-primary {
    color: #fed136 !important;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  section {
    padding: 100px 0;
  }
  
  section h2.section-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
  }
  
  section h3.section-subheading {
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 25px;
    text-transform: none;
    line-height: 1.5em;
    font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  @media (min-width: 768px) {
    section {
      padding: 150px 0;
    }
  }
  
  .btn {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
  }
  
  .btn-xl {
    font-size: 18px;
    padding: 20px 40px;
  }
  
  .btn-primary {
    background-color: #fed136;
    border-color: #fed136;
  }
  
  .btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    background-color: #fec810 !important;
    border-color: #fec810 !important;
    color: white;
  }
  
  .btn-primary:active, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
  }
  
  ::-moz-selection {
    background: #fed136;
    text-shadow: none;
  }
  
  ::selection {
    background: #fed136;
    text-shadow: none;
  }
  
  img::selection {
    background: transparent;
  }
  
  img::-moz-selection {
    background: transparent;
  }
  
  #mainNav {
    background-color: #212529;
  }
  
  #mainNav .navbar-toggler {
    font-size: 12px;
    right: 0;
    padding: 13px;
    text-transform: uppercase;
    color: #fed136;
    // border: 0;
    border:1px solid #fed136;
    // background-color: #fed136;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  #mainNav .navbar-brand {
    color: #fed136;
    font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
    padding: .7rem
  }
  
  #mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
    color: #fec503;
  }
  
  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 90%;
    font-weight: 400;
    padding: 0.75em 0;
    letter-spacing: 1px;
    color: white;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #fed136;
  }
  
  @media (min-width: 992px) {
    // 画面サイズが広い時にnavbarの背景が消えて太さが太くなる挙動をここをコメントアウトして制御
 
    #mainNav .navbar-brand {
      font-size: 1.75em;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }

   
以下省略

yume0409

2020/01/20 07:26

cssが読み込まれないと言うことはhtmlは読み込まれると言うことでしょうか？ rails newでアプリを生成すると自動的にapplication.cssにcssもしくはscssが全て読み込まれる記述はしてあります。 application.cssがapplication.scssになっていないでしょうか？ application.scssになっている場合、importをしてあげないと反映されません。 application.cssの場合は「= require_tree .」の記述があるか一度ご確認ください。これがないとcssが反映されません。

kazuki0323

2020/01/20 07:28

application.scssになっています。 importはどのようにすればよいでしょうか？

kazuki0323

2020/01/20 07:41

*= require_tree .の記述はされていました！その下に*= require_selfの記述もあります。

yume0409

2020/01/20 07:42

stylesheetsの中にファイル名がある場合は「@import "ファイル名";」これで大丈夫です。 stylesheetsの下にフォルダー名がある場合「@import "フォルダー名/ファイル名";」です。私はこう言う風に解釈してるのですが、私もrails 初心者なので、ちゃんとあってる回答か分かりません。 importについての記事貼っておきます。 https://qiita.com/natsu871/items/53b38a2543df97df751d

yume0409

2020/01/20 07:44

ちなみにapplication.scssにした場合は既存の記述は全て消して大丈夫です！