WordPressテーマ『十二単』リリース 🎉

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';

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

解決までのログ

🖥 対処法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

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。