scssが読み込まれない

Question

RailsでWEBアプリケーションを作り、rsils g controller home topでホーム画面を作成してルーティングをget "/" => "home#top"と書き、application.html.erb,application.css, top.html.erb、home.scssを一つずつ書いただけなのですがhome.scssが動作しません。applicationはapplication.cssが生成されているのにhomeに関してはhome.scssが生成されています。application.cssはちゃんと読み込まれるのにhome.scssは読み込まれません。(Sublimetext内での編集時に文字色が白のまま変わらない)

Gemfileにgem 'sass-rails', '~> 5.0'はあります。
application.cssに
*= require_tree .
*= require_self　も書いてあります。

気になることとして、application.cssのアイコンは「/*」なのにhome.scssのアイコンは、よくある四角の角が折ってある定番のファイルのアイコンになってます。

ググってもなかなかわかりませんでした。。どなたか解決できますでしょうか。

Answer 1

application.html.erbで<%= stylesheet_link_tag :all %>が抜けていないか
もし抜けていない場合homeコントローラーにlayout "application"と入れてみてください

参考記事

Comments

[naoya.n]

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>がデフォルトで書いてあります。
layout "application"でも変わりがありません。

Answer 2

rake assets:precompileはどうでしょうか?

Comments

[naoya.n]

実行してみましたが何も変わりませんでした。ちなみに
// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
がhome.scssに、はじめから書かれています。

[naoya.n]

回答宜しくお願いします！

Answer 3

「application.css」のファイル名を「application.scss」にしたら、どうなりますでしょうか。

Comments

[naoya.n]

application.scssにしたらアイコンがファイルのアイコンになりました。しかし動作に変わりはありません。application.scssは読み込まれてhome.scssは読み込まれません。

[naoya.n]

回答よろしくお願いします！

[maisumakun]

「*= require_tree .」周辺の書き方はどのようになっています？

[naoya.n]

application.cssにデフォルトで入っていたものをいじっていないです。
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/

[defeatist]

最後の*= require_tree .と*= require_selfを入れ替えてみてください