RailsのCSSが反映されません！

Question

前提・実現したいこと

Ruby/railsで文章を投稿できる簡単なwebサイトを作成しています。
このwebサイトは、gem、redcarpetとrougeを使用しています。
CSSを各ビューファイルに反映させたいです。
また、_rouge.scss.erbを使用したいです。

発生している問題・エラーメッセージ

何かしらの動作をするたびに、ターミナルにて、

ActionController::RoutingError (No route matches [GET] "/assets/rouge"):

が表示されます。Chromeにプレビュー表示すると、以前保存した時のCSSが使われており、CSSを変更、保存してもその変更が反映されません。

試したこと

rougeが原因かと思い、一旦/app/assets/stylesheets/application.cssの、

@import 'rouge';

という一文をコメントアウトしてみたところ、先程のターミナルのエラーメッセージは消えましたが、CSSは相変わらず適用されていませんでした。ここで、エラーメッセージはどこにも表示されませんでした。
また、ファイル名を application.scss に書き換えてみましたが、状況は変わりませんでした。
そこで、ファイル名を application.css に戻し、 /*= require rouge */ に書き換えると、

Sprockets::FileNotFound in Learnings#index
couldn't find file 'rouge' with type 'text/css'

と表示されたので確認したところ、確かに'rouge'という名前のファイルはありませんでしたが、
/assets/stylesheets/_rouge.scss.erbは存在します。

ソースコード

routes.rb

Rails.application.routes.draw do
    devise_for :users
    root 'learnings#index'
    
    get 'learnings' => 'learnings#index'
    get 'learnings/new' => 'learnings#new'
    post 'learnings' => 'learnings#create'
    get 'learnings/:id' => 'learnings#show'
    delete 'learnings/:id' => 'learnings#destroy'
    get 'learnings/:id/edit' => 'learnings#edit'
    patch 'learnings/:id' => 'learnings#update'
    get '/search' => 'learnings#search'
    
    get 'users/:id' => 'users#show'
end

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, 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 other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
/*= require rouge */

_rouge.scss.erb

<%= Rouge::Themes::Github.render(:scope => '.highlight') %>

補足情報（FW/ツールのバージョンなど）

railsのバ－ジョンは5.2.4.1、エディタはAWS, Cloud9を使用しています。

Comments

[no1knows]

application.cssのコードとroutes.rbのコードを記載いただくとより正確な回答がつくかと思います。

[yuki-]

ご指摘いただきありがとうございます。
ただ今、application.cssのコードとroutes.rbのコードを記載しました。
ご一考いただければ幸いです。

Answer 1

/app/assets/stylesheets/application.cssの

CSSのままだと、@importはファイル呼び出しとなってしまいます。

• ファイル名をapplication.scssに書き換える（Sass処理系が入っている必要があり）
• /*= require rouge */と、Sprocketsへの指示に置き換える

どちらかを行ってください。

Comments

[yuki-]

ご回答ありがとうございます。
ファイル名を `application.scss` に書き換えてみましたが、状況は変わりませんでした。
また、ファイル名を `application.css` に戻し、 `/*= require rouge */` と記述すると、
```
Sprockets::FileNotFound in Learnings#index
couldn't find file 'rouge' with type 'text/css'
```
と表示されたので確認したところ、確かに'rouge'という名前のファイルはありませんでしたが、
/assets/stylesheets/_rouge.scss.erbは存在します。
このファイルの中身は、
```
<%= Rouge::Themes::Github.render(:scope => '.highlight') %>
```
なのですが、これを適用するためにはどうすればよいでしょうか。

[no1knows]

キーワードで検索しただけですが、こういうことをやっているのでしょうか？
https://qiita.com/daigou26/items/252301e8812d55a718f8

[yuki-]

まさにそのようなwebサイトを作成中です！
作成中に、そのページも参考にさせていただきましたが、質問の通りのエラーが起こってしまいます。
rougeのCSSが適用されないだけでなく、通常のCSSですら適用されません。

Answer 2

何もわからず、とりあえず

RAILS_ENV=production bundle exec rake assets:precompile

このコードを実行していました。
このコードは、新たなcssファイルを作成してくれるもので、実行後はコンパイルされるcssは新たなcssのみであり、旧cssはコンパイルされません。
そのことを知らず、旧cssを変更していました。
新たなcssを変更すると、しっかりと反映されました。