CSSファイルの読み込み方
Ruby on Rails ではCSSを読み込むときにいくつかの設定が必要である。
実際、スタイルシートのタグがrubyには用意されているのでそれで簡単に読み込むことができる。
いかがそのコード例である。
<%= stylesheet_link_tag "css/bootstrap", :media => "all" %>
このコードの例はasset/css/bootstrapのcssファイルをhtml.erbファイルに込みこむという作業である。このパーセントはrubyのコードである。
レイアウトファイルを編集する。
asset/view/layoutsにapplication.html.erbが入っている。このファイルはすべてのすべての情報を集めるファイルであるため、初期の段階ではすべてのcssファイルをすべて読み込むことになっている。まずはこのコードを消しましょう。
削除するコード
<!DOCTYPE html>
<html>
<head>
<title>Sheen</title>
<style>
body {
padding: 45px 0 0 0;
}
</style>
<title>PaperclipTest</title>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
</br>
<%= yield %>
</body>
</html>
application.erbを編集する。
この項目を編集することによって、cssを許可することになる。プリコンパイルという作業である。
application.erb に以下のコードを追加する。Rails.application.config.assets.precompile += %w( css/* )
この時、*はワイルドカードといいcssファイル以下のすべてのファイルが対象とできる。
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.serve_static_assets = true
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
Rails.application.config.assets.precompile += %w( css/* )
producation環境にアップする場合
herokuなどのサーバーにアップする際はconfig file を編集しないと行けない。
config/initializers/asset.rb
を編集する。
以下のコードを追加しましょう。
Rails.application.config.serve_static_assets = true
まとめ
以上の作業によって、独立したCSSファイルを互いに影響を受けずに使用することができる。