CSSを反映させたい

Question

環境

• Visual Studio Code　Version: 1.55.0
• ブラウザ　google chrome
• Rails 5.2.5
• macOS Catalina バージョン10.15.7
• gem 'haml-rails'

##エラーに至った経緯
さっきまでcssが動いていたのですが共通部分(ヘッダーの共通部分レイアウト)をapplication.scssにヘッダー部分のコードを移したのですがそこからcssが反応しなくなりました。検証しても何も反映されていない模様。
検証した時のコードのスクショ

検索では「CSS 反応しない」等で調べていたのですがそれらを試したものを一覧にしておきます。
- 不注意によるもの（.がない、{が足りないや余分）

• スーパーリロード
• githubにpushした時のコードをコピー＆ペーストした。理由はこのコードであれば確実にcssは反映されていたから。

%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Connect Student
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

.home
  .top-block
    %img.home__image{:alt => "notdecade", :src => "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/connecting-and-sharing-royalty-free-image-1579168818.jpg"}
    %h1.welcome-to-japan Welcome to Japan
    %h1.international international
    %h1.student students
  %header#login-header.l-login-header
    %a.transfer-mypage{:href => "/"}
      %img.logo-mark{:alt => "logo", :src => "https://i.gzn.jp/img/2018/01/15/google-gorilla-ban/00.jpg"}
    %nav#navigation.navigation
    
      %ul.nav-list
        %li.top-page TOP
        %li.registraition NEW
        %li.my-page ME
        %li.login-page LOGIN

.l-login-header {
    width: 90%;
    height: 100px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    background-color: #FF9872;
    background: rgba(7, 7, 7, 0.7);

    .transfer-mypage {
      display: block;
      position: absolute;
      top: 25px;
      left: 10px;

      .logo-mark {
        width: 202px;
        height: 50px;
        margin-left: 45px;
      }
    }
    
    .navigation {
      height: 100px;

        .nav-list {
          font-size: 30px;
          display: flex;
          color: white;
          list-style: none;
          justify-content: flex-end;
          margin-right: 2%;
          width: 900px;
          margin-left: 40%;
          height: 100px;
          justify-content: space-between;
          margin-top: 25px;

          .top-page {
            color: #009d80;
            position: relative;
            display: block;
            height: 100px;
          }

          .registraition {
            color: #009d80;
            position: relative;
            display: block;
          }

          .my-page {
            color: #009d80;
            position: relative;
            display: block;
          }

          .login-page {
            color: #009d80;
            position: relative;
            display: block;
          }
        }
      }
    }

  }

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.5'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'haml-rails'

以上を試したのですがcssは反映されません。本気で困ってます。聞ける人が周りにいないので回答いただけるとありがたいです。よろしくお願いします。

Comments

[maisumakun]

フレームワークはRailsでしょうか。

プレーンなHTML以外を使っているのであれば、その環境に関する詳細も書いていただけないと、どうしようもなくなることがあります。

[K_3578]

>どうしよう、、、本当にわからない、、、
↑んなこと知らん。ヘルプ見れば分かるだろうけど質問本文の最初は要件を書いてくれ。
質問してる時点で困ってるのは分かってるから。

解決したいんだったら情報落としてくんないとわかんないよね。
maisumakunさんも仰ってるが、生のHTMLじゃないのは見た目でわかるけどどのフレームワーク使ってるかまでエスパーするほど回答者も優しくないので。

[kaito_kimura]

@maisumakun @K_3578
それは大変失礼なことをしてしまいました。申し訳ございません。環境を詳細に、無駄な文章を書かない、ご指摘ありがとうございます。

[maisumakun]

CSSの内容はどのファイルに書きましたか？

[kaito_kimura]

CSSはtop.scs、HTMLはtop.html.hamlです。

[maisumakun]

top.scsはどのフォルダに置いていますか？

（Railsでは、CSSの管理方法が2系統あるので、どちらで進めるかの区別が必要です）

[kaito_kimura]

https://gyazo.com/b0306cf4b1872cbfff434dfd521ee988

[kaito_kimura]

あとすみません。top.scsではなくてtop.scssでした。申し訳ないです

[K_3578]

>質問者さん
コメントは編集できますよ。

[kaito_kimura]

>K_3578さん
ありがとうございます。

[maisumakun]

application.scssの内容はどのようになっていますか？

[kaito_kimura]

>maisumakunさん
何も書いてないです。

Answer 1

何も書いてないです。

= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'

読み込んでいるCSSはapplicationですので、何も書かなければ何も読み込まれません。

Comments

[kaito_kimura]

= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'をそのまま検索したら@import 'ファイル名'と記述すればいいという記事を見つけられました。ありがとうございます。
https://matatsuna.hatenablog.com/entry/2017/12/03/150520

[kaito_kimura]

= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'をそのまま検索したら@import 'ファイル名'と記述すればいいという記事を見つけられました。ありがとうございます。
https://qiita.com/okamoto_ryo/items/1ceaf4ebca2ae3c256bc