RailsでCSS(Sass)が反映されない時の対処法

今までこんなことなかったのですが、珍しくCSSが反映されなかったので、一応メモとして残しておきます〜。

問題があった状態

// 一番上固定
@import 'setsup.sass';

/*
*= require_self
*= require_tree .
*/

// 有象無象
@import 'components.sass';
@import 'livecam.sass';
@import 'loading.scss';
@import 'heading.sass';

色々試してて最後にgitに残っていた状態がこれでした。

解決時

@import 'setsup';

/*
 *= require_tree .
 *= require_self
 */

@import 'components';
@import 'livecam';
@import 'loading';
@import 'heading';
https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

拡張子がいらなかったみたい

僕の解決までのログ

対処法1、最初に生成される読み込みコードを削除してないか確認

/*
 *= require_self
 *= require_tree .
 */

こいつのことです。今までよく知らなかったのですが、こいつが何やっているかというと、ファイルの読み込みに関するアレコレを担っているそうな。ガッツリ消してました。

参考https://qiita.com/takish/items/c5f264577d2db75fd10c

こんな感じで上から順にimport指定したcssファイルがapplication.cssファイルへと読み込まれていくわけですが、それに関するアレコレを担っているというらしい……。

ちなみに、cssファイルは名前順に読み込まれるようなので、

hello.scss hoge.scss があった時はhelloの方から読み込まれます。

Sassの変数の定義とかを後から読み込まれる hoge.scss でやってしまうとエラーが出るので、僕は

// 一番上固定
@import 'setsup.sass'; /*変数の定義のファイルは一番上*/

/*
*= require_self
*= require_tree .
*/

こうしていたわけです。

対処法2、ブラウザのキャッシュかどうかの確認

スーパーリロードするなりブラウザ変えるなりしてもまるでダメ。

対処法3、development.rbに追記

こちらはそもそもcssがロードされない時の対処法だそう。一応試しましたけど。

config > environments > development.rb に下記一行を追記。

# 略
  config.assets.digest = false
end

参考https://qiita.com/Cheekyfunkymonkey/items/04571ccb0446b783373f

対処法4、ファイル名の書き方確認

というわけで、これですね。

僕の場合は @import 'hoge.scss'; みたいに拡張子をつけていたのがダメだったみたいです。

正しくは @import 'hoge';

色々調べていると、最初に自動生成される application.css をscssに変更せずにいて、なおかつscssの書き方をしてしまってエラーというパターンの人もいるみたい。

参考https://qiita.com/Ryunosuke38/items/7ab24caf13ea0ca1f49c

コメントを残す

メールアドレスが公開されることはありません。