5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[scss]hamlへの反映方法は2種類あった 備忘録

Last updated at Posted at 2020-03-20

今までscssのhamlへの反映方法といったら
application.scss@import記述のみと思っていましたが。

実はそんなことをしなくてもコマンド入力で作成したscssには
自動的に反映される記述が入っているんです。
知りませんでした。。。
コメントアウトされ得た以下の3行があるとOKらしい

scss
// Place all the styles related to the reset controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

ですので、scssの反映方法を以下2種類をまとめたいと思います

##コマンドで作成する方法

importいらないコマンド存在したー!!!

ターミナル
$ rails g assets 作成したいファイル名

以上です。
あとはscssに記述したものは自動的にhamlに反映されます。

手動でファイルを作成する方法

右クリックでファイル作成をした場合scssにimport記述は自動生成されませんので
application.scssにimportしてhamlにscssが当たるようにしましょう。

やり方
・hamlに反映させたいscssのファイル名をアンダーバー「 _ 」始まりにします。
application.scssにimportします。
・終わり

記述参考は下記

application.scss
@import "home";
@import "いれたいscssファイル名(アンダーバーは入れない)"; ⬅︎終わりは必ずセミコロンを入れる

#assetsの中でもフォルダの異なるものはURLをちゃんと記載しないと反映されない
@import "config/reset";
@import "フォルダ名/ファイル名";

参照記事

Railsドキュメント

終わりに

自分のいた学校は極力コマンドを使用しない学校でしたが
コマンドはコマンドで別の仕様があることを今回知りました。
アウトプットもそうですがインプットも必要。
人との情報交換は本当に大事だなと改めて感じました。

初学者な為、記事に不備やアドバイ等ございましたらご連絡頂けますと幸いです。
最後まで読んできただきありがとうございます。

5
5
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
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?