LoginSignup
0
2

More than 3 years have passed since last update.

Ruby On RailsでCSSが効かなくなった場合に考えられる原因について

Posted at

この記事を書いたきっかけ

ruby on railsを利用してアプリを作成している際、突然application.cssに書いていたcssが効かなくなってしまいました。
色々と調べていると、デフォルトでapplication.cssに書いてある以下のコードを消してしまったことが原因でした。

app/assets/stylesheets/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
 */

コメントになっていたので不要なコードと決めつけてしまい、消してしまいました^^;
ちゃんと内容を読んでから消すべきでした。

ちなみに、削除してしまったコードの以下の2行が非常に重要な意味を持っているコードなんです。

 *= require_tree .
 *= require_self

この2行は、Railsでデフォルトで導入されている「アセットパイプライン」というライブラリのディレクティブ (directive: 命令、指示) にあたります。

参考:アセットパイプラインについて

*= require_treeって何??

「*= require_tree」はapp/assets/stylesheets内にあるcssファイルを全て読み込むという意味です。
ただし、読み込まれるファイルの順番は辞書順になります。

読み込まれるファイルの順番を変更することもできます。これについては以下のページが参考になります。

参考:RailsでCSSの読み込む順番を制御する方法

*= require_selfって何??

「*= require_self」はapplication.css自体を取り込むという意味になります。
これを削除してしまうと、application.cssの内容が作成しているアプリに反映されません。

最後に

デフォルトで記載されているコードについては、必ず意味を理解してから必要に応じて削除もしくは残しておく必要があります。
何事も必ず意味があるということに、今回気付かされました。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2