6
7

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 5 years have passed since last update.

Ruby on Railsで外部のcssを読み込む方法

Posted at

Ruby on Rails自分用備忘録

Ruby on Railsの既存プロジェクトを引き継いだ。そもそもRubyもRailsも触ったことがなかったけど、フルスタックフレームワークって何ぞやってことは、概ねDjangoで理解してたし、Rubyみたいなモダン言語は別に勉強しなくても、まあなんとなく雰囲気でいけるんじゃん。言語よりフレームワークの使用を覚えるのが面倒臭かった。ほら、フルスタックフレームワークって設計者の癖がより色濃く出るじゃんね。んで、早速「ん?」ってなった箇所があったので、書き留めておこうと思う。なんでもかんでも、できることなら正確に理解した今日この頃。

どうやってcssを読み込めばいいんだろう

slimからcssを個別に読み込んでる感じ?とか思ったけど違った。slimからcssを呼び出してない。なのにcssが反映されている。なんじゃこりゃ。んで、勉強して知った。Railsでは、というか、どうやら少なくともこのプロジェクトでは、ViewLayoutapplication.html.slimというところがあり、そこはいつも書くコードを自動化するためにあるらしくて、そこに下記のように書くと ...

= stylesheet_link_tag 'application', media: 'all'

アプリ全体で共有するcssになるらしい。これはRailsの組み込み関数で、stylesheet_link_tag (詳細はRails APIを参照) を使って、application.css.sassをすべてのファイルで読み込んでいる。それで、application.css.sassで、こんな風に、自分で独自のcssを追加した。

@import 'modules/invoice'
@import 'modules/slider-pro'

//独自に追加した
@import 'test_css/testcss'

んで、上記のように書いたら、独自に作ったcssが、全部のページに適応された。下記のように書けば、アプリ全体でボディの背景色が緑色になった。

body
  background: green

でも、こういうやり方って普通なんだろうか。これじゃ、名前衝突が起きないのだろうか?名前衝突が起きないためには、普通はstylesheet_link_tagをもう少しなんとか使って、application.css.sassに、全部のcssを書いて、全てのcssを全てのファイルでシェアするのは、良いことなんだろうか。わからない、わからない、わからない。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?